diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4cf6348..a0613fd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -96,6 +96,9 @@ importers:
       html-minifier:
         specifier: ^4.0.0
         version: 4.0.0
+      mdsvex:
+        specifier: ^0.11.0
+        version: 0.11.0(svelte@3.59.2)
       postcss:
         specifier: ^8.4.31
         version: 8.4.31
@@ -635,6 +638,10 @@ packages:
     resolution: {integrity: sha512-QzhsZ1dMGyJbn/D9V80zp4GIA4J4rfAjCCxc3MP+new0E8dyVdSkR735Lx+n3LIaHNFcjHL5+TbziccuT+fdoQ==}
     dev: true
 
+  /@types/unist@2.0.9:
+    resolution: {integrity: sha512-zC0iXxAv1C1ERURduJueYzkzZ2zaGyc+P2c95hgkikHPr3z8EdUZOlgEQ5X0DRmwDZn+hekycQnoeiiRVrmilQ==}
+    dev: true
+
   /@vitest/expect@0.34.6:
     resolution: {integrity: sha512-QUzKpUQRc1qC7qdGo7rMK3AkETI7w18gTCUrsNnyjjJKYiuUB9+TQK3QnR1unhCnWRC0AbKv2omLGQDF/mIjOw==}
     dependencies:
@@ -1337,6 +1344,18 @@ packages:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
     dev: false
 
+  /mdsvex@0.11.0(svelte@3.59.2):
+    resolution: {integrity: sha512-gJF1s0N2nCmdxcKn8HDn0LKrN8poStqAicp6bBcsKFd/zkUBGLP5e7vnxu+g0pjBbDFOscUyI1mtHz+YK2TCDw==}
+    peerDependencies:
+      svelte: '>=3 <5'
+    dependencies:
+      '@types/unist': 2.0.9
+      prism-svelte: 0.4.7
+      prismjs: 1.29.0
+      svelte: 3.59.2
+      vfile-message: 2.0.4
+    dev: true
+
   /merge-stream@2.0.0:
     resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
     dev: true
@@ -1664,10 +1683,13 @@ packages:
       react-is: 18.2.0
     dev: true
 
+  /prism-svelte@0.4.7:
+    resolution: {integrity: sha512-yABh19CYbM24V7aS7TuPYRNMqthxwbvx6FF/Rw920YbyBWO3tnyPIqRMgHuSVsLmuHkkBS1Akyof463FVdkeDQ==}
+    dev: true
+
   /prismjs@1.29.0:
     resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
     engines: {node: '>=6'}
-    dev: false
 
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
@@ -2095,6 +2117,12 @@ packages:
       '@fastify/busboy': 2.0.0
     dev: true
 
+  /unist-util-stringify-position@2.0.3:
+    resolution: {integrity: sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==}
+    dependencies:
+      '@types/unist': 2.0.9
+    dev: true
+
   /unplugin-icons@0.17.1:
     resolution: {integrity: sha512-KsWejBPCHokYCNDQUzGu6R3E3XDYH/YpewgQwrVBXgpl1iR0RdW1NEGNdjlbuapwVnZXVgA5eiDTfNaQCawSdg==}
     peerDependencies:
@@ -2154,6 +2182,13 @@ packages:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
     dev: true
 
+  /vfile-message@2.0.4:
+    resolution: {integrity: sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==}
+    dependencies:
+      '@types/unist': 2.0.9
+      unist-util-stringify-position: 2.0.3
+    dev: true
+
   /vite-node@0.34.6(@types/node@20.7.2):
     resolution: {integrity: sha512-nlBMJ9x6n7/Amaz6F3zJ97EBwR2FkzhBRxF5e+jE6LA3yi6Wtc2lyTij1OnDMIr34v5g/tVQtsVAzhT0jc5ygA==}
     engines: {node: '>=v14.18.0'}
diff --git a/site/package.json b/site/package.json
index edf52b9..281f461 100644
--- a/site/package.json
+++ b/site/package.json
@@ -18,6 +18,7 @@
 		"@tailwindcss/typography": "^0.5.10",
 		"autoprefixer": "^10.4.16",
 		"html-minifier": "^4.0.0",
+		"mdsvex": "^0.11.0",
 		"postcss": "^8.4.31",
 		"svelte": "^3.54.0",
 		"svelte-check": "^3.0.1",
diff --git a/site/src/lib/ui/Pagination.svelte b/site/src/lib/ui/Pagination.svelte
new file mode 100644
index 0000000..291d229
--- /dev/null
+++ b/site/src/lib/ui/Pagination.svelte
@@ -0,0 +1,25 @@
+<script>
+  import ArrowLeft from "virtual:icons/heroicons/arrow-left";
+  import ArrowRight from "virtual:icons/heroicons/arrow-right";
+
+  /** @type {string} */
+  export let previousLabel;
+  /** @type {string} */
+  export let nextLabel;
+  /** @type {string} */
+  export let previousHref;
+  /** @type {string} */
+  export let nextHref;
+</script>
+
+<footer class="flex items-center justify-between not-prose pt-4 border-t">
+  <a
+    class="inline-flex gap-1 items-center justify-center overflow-hidden text-sm font-medium transition rounded-full bg-zinc-100 py-1 px-3 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800/40 dark:text-zinc-400 dark:ring-1 dark:ring-inset dark:ring-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
+    href={previousHref}><ArrowLeft class="h-4 w-4" />{previousLabel}</a
+  >
+
+  <a
+    class="inline-flex gap-1 items-center justify-center overflow-hidden text-sm font-medium transition rounded-full bg-zinc-100 py-1 px-3 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800/40 dark:text-zinc-400 dark:ring-1 dark:ring-inset dark:ring-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
+    href={nextHref}>{nextLabel}<ArrowRight class="h-4 w-4" /></a
+  >
+</footer>
diff --git a/site/src/routes/[[locale=locale]]/$t18s/+page.svelte b/site/src/routes/[[locale=locale]]/$t18s/+page.svx
similarity index 57%
rename from site/src/routes/[[locale=locale]]/$t18s/+page.svelte
rename to site/src/routes/[[locale=locale]]/$t18s/+page.svx
index 0307b2a..9b473fb 100644
--- a/site/src/routes/[[locale=locale]]/$t18s/+page.svelte
+++ b/site/src/routes/[[locale=locale]]/$t18s/+page.svx
@@ -4,14 +4,13 @@
   import locale_param_matcher_snippet from "./locale-param-matcher-snippet.js?raw";
 </script>
 
-<h1>$t18s Reference</h1>
-<p>
-  The `$t18s` module contains all runtime code for t18s. It is how you interact
-  with the library.
-</p>
+# $t18s Module Reference
 
-<h2><code>type Locale</code></h2>
-<p>A union type of all the locales you have registered with t18s.</p>
+The `$t18s` module contains all runtime code for t18s. It is how you interact
+with the library.
+
+## `type Locale`
+A union type of all the locales you have registered with t18s.
 
 <CodeGroup let:Tab>
   <Tab>
@@ -19,14 +18,14 @@
   </Tab>
 </CodeGroup>
 
-<h2><code>locales</code></h2>
-<p>
-  An array of all the locales you have registered with t18s. Useful for places
-  where you need to iterate over all locales, such as Locale Switchers or SEO.
-</p>
+## `locales`
+
+An array of all the locales you have registered with t18s. Useful for places
+where you need to iterate over all locales, such as Locale Switchers or SEO.
 
-<h2><code>$locale</code> Store</h2>
-<p>A writable store containing the currently active locale.</p>
+## `$locale` Store
+
+A writable store containing the currently active locale.
 
 <CodeGroup let:Tab>
   <Tab>
@@ -34,11 +33,10 @@
   </Tab>
 </CodeGroup>
 
-<h2><code>isLocale</code></h2>
-<p>
-  A convenience function for checking if something is a valid locale or not.
-  Only the locales that are registered with t18s are considered valid.
-</p>
+## `isLocale`
+
+A convenience function for checking if something is a valid locale or not.
+Only the locales that are registered with t18s are considered valid.
 
 <CodeGroup let:Tab>
   <Tab>
@@ -49,7 +47,7 @@
   </Tab>
 </CodeGroup>
 
-<p>It is useful for quickly creating a param matcher for locales.</p>
+It is useful for quickly creating a param matcher for locales.
 
 <CodeGroup let:Tab let:Header>
   <Header title="src/params/locale.js" />
@@ -58,10 +56,11 @@
   </Tab>
 </CodeGroup>
 
-<h2><code>setLocale</code></h2>
-<p>Sets the current locale. Useful for Locale Switchers.</p>
+## `setLocale`
 
-<h2><code>$t</code> Store</h2>
+Sets the current locale. Useful for Locale Switchers.
+
+## `$t` Store
 
 The main store through which you interact with t18s. It contains a function that
 will return a translated string for a given key.
@@ -91,12 +90,11 @@ interpolate into.
   </Tab>
 </CodeGroup>
 
-<h2><code>preloadLocale</code></h2>
-<p>
-  Preloads any messages that are needed for the given locale. Call this before
-  trying to display any messages to avoid a flash of fallbacks. This is usually
-  done in `+page.js` files.
-</p>
+## `preloadLocale`
+
+Preloads any messages that are needed for the given locale. Call this before
+trying to display any messages to avoid a flash of fallbacks. This is usually
+done in `+page.js` files.
 
 <CodeGroup let:Tab>
   <Tab>
@@ -104,11 +102,10 @@ interpolate into.
   </Tab>
 </CodeGroup>
 
-<h2><code>const fallbackLocale</code></h2>
-<p>
-  The fallback locale you specified in your config, or null if you don't specify one. Will be definitely
-  typed based on your config.
-</p>
+## `const fallbackLocale`
+
+The fallback locale you specified in your config, or null if you don't specify one. Will be definitely
+typed based on your config.
 
 <CodeGroup let:Tab>
   <Tab>
diff --git a/site/src/routes/[[locale=locale]]/comparisons/+page.svelte b/site/src/routes/[[locale=locale]]/comparisons/+page.svx
similarity index 89%
rename from site/src/routes/[[locale=locale]]/comparisons/+page.svelte
rename to site/src/routes/[[locale=locale]]/comparisons/+page.svx
index 3197c5e..d345d38 100644
--- a/site/src/routes/[[locale=locale]]/comparisons/+page.svelte
+++ b/site/src/routes/[[locale=locale]]/comparisons/+page.svx
@@ -3,11 +3,10 @@
     import XMark from "virtual:icons/heroicons/x-mark"
 </script>
 
-<h1>Comparisons to other Libraries</h1>
-<p>
-    There are quite a few i18n libraries available for Svelte. Here is how 
-    t18s compares to the most popular ones.
-</p>
+# Comparisons to other Libraries
+
+There are quite a few i18n libraries available for Svelte. Here is how
+t18s compares to the most popular ones.
 
 <table>
     <thead>
@@ -63,4 +62,4 @@
             <td><XMark/></td>
         </tr>
     </tbody>
-</table>
\ No newline at end of file
+</table>
diff --git a/site/src/routes/[[locale=locale]]/getting-started/+page.svelte b/site/src/routes/[[locale=locale]]/getting-started/+page.svx
similarity index 61%
rename from site/src/routes/[[locale=locale]]/getting-started/+page.svelte
rename to site/src/routes/[[locale=locale]]/getting-started/+page.svx
index 9ff21de..db7e01c 100644
--- a/site/src/routes/[[locale=locale]]/getting-started/+page.svelte
+++ b/site/src/routes/[[locale=locale]]/getting-started/+page.svx
@@ -4,9 +4,9 @@
   import Prism from "$lib/ui/Prism.svelte";
 </script>
 
-<h1>Getting Started</h1>
+# Getting Started
 
-<p>First you need to install t18s as a dev dependency.</p>
+First you need to install t18s as a dev dependency.
 
 <CodeGroup let:Header let:Tab>
   <Header title="Installation" />
@@ -19,10 +19,8 @@
   >
 </CodeGroup>
 
-<p>
-  T18S isn't just a library, it's a vite-plugin, so you will need to register it
-  in your vite config.
-</p>
+T18S isn't just a library, it's a vite-plugin, so you will need to register it
+in your vite config.
 
 <CodeGroup let:Header let:Tab>
   <Header title="vite.config.js" />
@@ -31,8 +29,6 @@
   </Tab>
 </CodeGroup>
 
-<p>
-  You will need to at least one option in the plugin options; The list of
-  locales that you want to support. Additionally you may use a fallback locale
-  that will be used if a message is missing in the current locale.
-</p>
+You will need to at least one option in the plugin options; The list of
+locales that you want to support. Additionally you may use a fallback locale
+that will be used if a message is missing in the current locale.
diff --git a/site/src/routes/[[locale=locale]]/plugin-config/+page.svelte b/site/src/routes/[[locale=locale]]/plugin-config/+page.svelte
deleted file mode 100644
index 520563e..0000000
--- a/site/src/routes/[[locale=locale]]/plugin-config/+page.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<h1>Plugin Configuration</h1>
\ No newline at end of file
diff --git a/site/src/routes/[[locale=locale]]/plugin-config/+page.svx b/site/src/routes/[[locale=locale]]/plugin-config/+page.svx
new file mode 100644
index 0000000..c107799
--- /dev/null
+++ b/site/src/routes/[[locale=locale]]/plugin-config/+page.svx
@@ -0,0 +1 @@
+# Plugin Configuration
\ No newline at end of file
diff --git a/site/src/routes/[[locale=locale]]/preloading/+page.svelte b/site/src/routes/[[locale=locale]]/preloading/+page.svelte
deleted file mode 100644
index 27c43b8..0000000
--- a/site/src/routes/[[locale=locale]]/preloading/+page.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<h1>TODO</h1>
\ No newline at end of file
diff --git a/site/src/routes/[[locale=locale]]/preloading/+page.svx b/site/src/routes/[[locale=locale]]/preloading/+page.svx
new file mode 100644
index 0000000..ce0ade0
--- /dev/null
+++ b/site/src/routes/[[locale=locale]]/preloading/+page.svx
@@ -0,0 +1 @@
+# Preloading
\ No newline at end of file
diff --git a/site/src/routes/[[locale=locale]]/roadmap/+page.svelte b/site/src/routes/[[locale=locale]]/roadmap/+page.svelte
deleted file mode 100644
index e66382b..0000000
--- a/site/src/routes/[[locale=locale]]/roadmap/+page.svelte
+++ /dev/null
@@ -1,62 +0,0 @@
-<script>
-  import better_i18n_demo_gif from "./better-i18n-demo.gif";
-</script>
-
-<h1>Roadmap</h1>
-
-<p>
-  T18S is not done. There is still a lot we want to add. Here are some of our
-  ideas for the future in no particular order.
-</p>
-
-<h2>Robustness</h2>
-<p>
-  T18S is still relatively new, and hasn't handled all the edge cases yet. This causes occasional 
-  problems with the dev-server, reloading translations and other inconveniences. We want to make sure
-  that t18s is as robust as possible and can deliver the best experience possible.
-</p>
-
-
-<h2>Support more File Formats</h2>
-<p>
-    There exists a wide range of file formats for translations. We want to support as many of them as possible
-    in order to allow developers and translators to use the tools they are most comfortable with.
-</p>
-
-<h2>Built in Internationalized Routing</h2>
-<p>
-    SvelteKit currently doesn't offer a built in way to internationalize routes. It's left 
-    to the developer to implement this. We want to provide a standard and straight forward 
-    way to do this. Due to the complexity of the problem there are still a lot of open questions here,
-    and there is a lot of experimenting left to be done.
-</p>
-
-<h2>Interactive Translation</h2>
-<p>
-  There are a few proof-of-concept tools & sites out there that push the
-  boundary of how we interact with the things we build. One of those is
-  <a
-    href="https://github.com/versiobit/better-i18n-for-svelte"
-    target="_blank"
-    rel="noopener noreferrer">better-i18n-for-svelte</a
-  >. It's a proof of concept for editing translations in your dev-browser
-  directly, instead of files.
-</p>
-
-<img
-  src={better_i18n_demo_gif}
-  width="1100"
-  height="700"
-  loading="lazy"
-  alt="Better i18n for Svelte allowing you to click on some text and edit it directly in the browser. The changes are then saved to disk."
-/>
-
-<p>
-  We want to experiment with implementing features like this in t18s. There are a lot of open questions 
-  with this though. How do we determine which text came from a translation? How do we handle variable interpolation
-  in the editor, how do we add new translations? 
-</p>
-
-<p>
-    Until we have answers to these questions, this will remain relatively low priority.
-</p>
diff --git a/site/src/routes/[[locale=locale]]/roadmap/+page.svx b/site/src/routes/[[locale=locale]]/roadmap/+page.svx
new file mode 100644
index 0000000..71df6ac
--- /dev/null
+++ b/site/src/routes/[[locale=locale]]/roadmap/+page.svx
@@ -0,0 +1,48 @@
+<script>
+  import better_i18n_demo_gif from "./better-i18n-demo.gif";
+</script>
+
+# Roadmap
+
+T18S is not done. There is still a lot we want to add. Here are some of our
+ideas for the future in no particular order.
+
+## Robustness
+
+T18S is still relatively new, and hasn't handled all the edge cases yet. This causes occasional
+problems with the dev-server, reloading translations and other inconveniences. We want to make sure
+that t18s is as robust as possible and can deliver the best experience possible.
+
+## Support more File Formats
+
+There exists a wide range of file formats for translations. We want to support as many of them as possible
+in order to allow developers and translators to use the tools they are most comfortable with.
+
+## Built in Internationalized Routing
+
+SvelteKit currently doesn't offer a built in way to internationalize routes. It's left
+to the developer to implement this. We want to provide a standard and straight forward
+way to do this. Due to the complexity of the problem there are still a lot of open questions here,
+and there is a lot of experimenting left to be done.
+
+## Interactive Translation
+
+There are a few proof-of-concept tools & sites out there that push the
+boundary of how we interact with the things we build. One of those is
+[better-i18n-for-svelte](https://github.com/versiobit/better-i18n-for-svelte).
+It's a proof of concept for editing translations in your dev-browser directly,
+instead of in files.
+
+<img
+  src={better_i18n_demo_gif}
+  width="1100"
+  height="700"
+  loading="lazy"
+  alt="Better i18n for Svelte allowing you to click on some text and edit it directly in the browser. The changes are then saved to disk."
+/>
+
+We want to experiment with implementing features like this in t18s. There are a lot of open questions
+with this though. How do we determine which text came from a translation? How do we handle variable interpolation
+in the editor, how do we add new translations?
+
+Until we have answers to these questions, this will remain relatively low priority.
diff --git a/site/src/routes/[[locale=locale]]/seo/+page.svelte b/site/src/routes/[[locale=locale]]/seo/+page.svelte
deleted file mode 100644
index 5b5c69f..0000000
--- a/site/src/routes/[[locale=locale]]/seo/+page.svelte
+++ /dev/null
@@ -1,131 +0,0 @@
-<script>
-  import CodeGroup from "$lib/ui/CodeGroup.svelte";
-  import Prism from "$lib/ui/Prism.svelte";
-  import link_rel_alternate_snippet from "./link-rel-alternate-snippet.html?raw";
-  import x_default_snippet from "./x-default-snippet.html?raw";
-  import app_template_snippet from "./app-template-snippet.html?raw";
-  import hooks_server_js_snippet from "./hooks-server-js-snippet.js?raw";
-  import browser_locale_switching_snippet from "./browser-locale-switching-snippet.svelte?raw";
-  import a_hreflang_snippet from "./a-hreflang-snippet.html?raw";
-  import Callout from "$lib/ui/Callout.svelte";
-</script>
-<h1>SEO</h1>
-<p>
-    There are quite a few SEO related things you need to keep in mind when developing
-    a multi-language site. This page will give you a quick overview of the most important ones.
-</p>
-
-
-<h2>Alternate Links</h2>
-<p>
-    Alternate links are a way to tell search engines that a page exists in multiple languages, 
-    and where to find them. This is done by adding a link tag to the head of your page.
-</p>
-
-
-<p>
-    You should add a link tag for each language your site is available in, including the 
-    one the page is currently in. 
-</p>
-
-<CodeGroup let:Tab>
-    <Tab>
-        <Prism language="html" code={link_rel_alternate_snippet} />
-    </Tab>
-</CodeGroup>
-
-<p>
-    If you have a <i>"default lanugage"</i> that you want to use when the user's language is not available,
-    you should add a link tag with the <code>hreflang</code> attribute set to <code>x-default</code>. This 
-    tells search engines that this is the default language.
-</p>
-
-<CodeGroup let:Tab>
-    <Tab>
-        <Prism language="html" code={x_default_snippet} />
-    </Tab>
-</CodeGroup>
-
-
-<h2>Locale Switchers</h2>
-<p>
-    It is recommended that you use <code>a</code> tags for your locale switchers. This is because
-    search engines and the SvelteKit prerenderer will follow these links, and index the pages they lead to. They
-    also work if JavaScript is disabled.
-</p>
-
-<p>
-    But, we need to make sure to tell the search engines that these links just lead to the same page
-    in a different language, not separate pages. We do this by adding an <code>hreflang</code> attribute.
-</p>
-
-
-
-<CodeGroup let:Tab>
-    <Tab>
-        <Prism language="html" code={a_hreflang_snippet} />
-    </Tab>
-</CodeGroup>
-
-
-<h2>The Lang Attribute</h2>
-<p>
-    Browsers determine the page's language by looking at the <code>lang</code> attribute on the <code>html</code> tag.
-    We need to make sure that this attribute is set to the correct language, both during server rendering,
-    and when switching languages on the client.
-</p>
-
-
-<h3>On the Server</h3>
-
-<p>
-    SvelteKit offers a relatively simple way to set the <code>lang</code> attribute during server rendering.
-    We can set it in a hook.
-</p>
-
-<p>
-    In the app template, let's add a placeholder string in the <code>lang</code> attribute.
-</p>
-
-<CodeGroup let:Header let:Tab>
-    <Header title="src/app.html" />
-    <Tab>
-        <Prism language="html" code={app_template_snippet} />
-    </Tab>
-</CodeGroup>
-
-<p>
-    Then in the server <code>handle</code> hook, we can replace it with the correct language.
-</p>
-
-<CodeGroup let:Header let:Tab>
-    <Header title="src/hooks.server.js" />
-    <Tab>
-        <Prism language="javascript" code={hooks_server_js_snippet} />
-    </Tab>
-</CodeGroup>
-
-<h3>On the client</h3>
-
-<p>
-    T18S does not do a full page reload when switching languages, so we need to make sure that the <code>lang</code> attribute
-    gets set correctly when switching languages on the client.
-</p>
-
-<p>
-    In the root layout. Check that we are in the browser, 
-    and then reactively set the <code>lang</code> attribute base on the <code>$locale</code> store exported
-    by T18S.
-</p>
-
-<CodeGroup let:Header let:Tab>
-    <Header title="src/routes/+layout.svelte" />
-    <Tab>
-        <Prism language="svelte" code={browser_locale_switching_snippet} />
-    </Tab>
-</CodeGroup>
-
-<Callout type="info">
-    This may become built in behavior in the future, depending on feedback. Old
-    code probably won't break, so you can add this now without worrying about it.
-</Callout>
\ No newline at end of file
diff --git a/site/src/routes/[[locale=locale]]/seo/+page.svx b/site/src/routes/[[locale=locale]]/seo/+page.svx
new file mode 100644
index 0000000..24736dc
--- /dev/null
+++ b/site/src/routes/[[locale=locale]]/seo/+page.svx
@@ -0,0 +1,102 @@
+<script>
+  import CodeGroup from "$lib/ui/CodeGroup.svelte";
+  import Prism from "$lib/ui/Prism.svelte";
+  import link_rel_alternate_snippet from "./link-rel-alternate-snippet.html?raw";
+  import x_default_snippet from "./x-default-snippet.html?raw";
+  import app_template_snippet from "./app-template-snippet.html?raw";
+  import hooks_server_js_snippet from "./hooks-server-js-snippet.js?raw";
+  import browser_locale_switching_snippet from "./browser-locale-switching-snippet.svelte?raw";
+  import a_hreflang_snippet from "./a-hreflang-snippet.html?raw";
+  import Callout from "$lib/ui/Callout.svelte";
+</script>
+
+# SEO
+
+There are quite a few SEO related things you need to keep in mind when developing
+a multi-language site. This page will give you a quick overview of the most important ones.
+
+## Alternate Links
+
+Alternate links are a way to tell search engines that a page exists in multiple languages,
+and where to find them. This is done by adding a link tag to the head of your page.
+
+You should add a link tag for each language your site is available in, including the
+one the page is currently in.
+
+<CodeGroup let:Tab>
+    <Tab>
+        <Prism language="html" code={link_rel_alternate_snippet} />
+    </Tab>
+</CodeGroup>
+
+If you have a _"default language"_ that you want to use when the user's language is not available,
+you should add a link tag with the `hreflang` attribute set to `x-default`. This
+tells search engines that this is the default language.
+
+<CodeGroup let:Tab>
+    <Tab>
+        <Prism language="html" code={x_default_snippet} />
+    </Tab>
+</CodeGroup>
+
+## Locale Switchers
+
+It is recommended that you use `a` tags for your locale switchers. This is because
+search engines and the SvelteKit prerenderer will follow these links, and index the pages they lead to. They also work if JavaScript is disabled.
+
+But, we need to make sure to tell the search engines that these links just lead to the same page
+in a different language, not separate pages. We do this by adding an `hreflang` attribute.
+
+<CodeGroup let:Tab>
+    <Tab>
+        <Prism language="html" code={a_hreflang_snippet} />
+    </Tab>
+</CodeGroup>
+
+## The Lang Attribute
+
+Browsers determine the page's language by looking at the `lang` attribute on the `html` tag.
+We need to make sure that this attribute is set to the correct language, both during server rendering,
+and when switching languages on the client.
+
+### On the Server
+
+SvelteKit offers a relatively simple way to set the `lang` attribute during server rendering.
+We can set it in a hook.
+
+In the app template, let's add a placeholder string in the `lang` attribute.
+
+<CodeGroup let:Header let:Tab>
+    <Header title="src/app.html" />
+    <Tab>
+        <Prism language="html" code={app_template_snippet} />
+    </Tab>
+</CodeGroup>
+
+Then in the server `handle` hook, we can replace it with the correct language.
+
+<CodeGroup let:Header let:Tab>
+    <Header title="src/hooks.server.js" />
+    <Tab>
+        <Prism language="javascript" code={hooks_server_js_snippet} />
+    </Tab>
+</CodeGroup>
+
+### On the client
+
+T18S does not do a full page reload when switching languages, so we need to make sure that the `lang` attribute gets set correctly when switching languages on the client.
+
+In the root layout. Check that we are in the browser,
+and then reactively set the `lang` attribute base on the `$locale` store exported by T18S.
+
+<CodeGroup let:Header let:Tab>
+    <Header title="src/routes/+layout.svelte" />
+    <Tab>
+        <Prism language="svelte" code={browser_locale_switching_snippet} />
+    </Tab>
+</CodeGroup>
+
+<Callout type="info">
+    This may become built in behavior in the future, depending on feedback. Old
+    code probably won't break, so you can add this now without worrying about it.
+</Callout>
diff --git a/site/src/routes/[[locale=locale]]/switching-locales/+page.svelte b/site/src/routes/[[locale=locale]]/switching-locales/+page.svelte
deleted file mode 100644
index 27c43b8..0000000
--- a/site/src/routes/[[locale=locale]]/switching-locales/+page.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<h1>TODO</h1>
\ No newline at end of file
diff --git a/site/src/routes/[[locale=locale]]/switching-locales/+page.svx b/site/src/routes/[[locale=locale]]/switching-locales/+page.svx
new file mode 100644
index 0000000..30d0e60
--- /dev/null
+++ b/site/src/routes/[[locale=locale]]/switching-locales/+page.svx
@@ -0,0 +1 @@
+# Switching Locales
\ No newline at end of file
diff --git a/site/src/routes/[[locale=locale]]/syntax/+page.svelte b/site/src/routes/[[locale=locale]]/syntax/+page.svx
similarity index 59%
rename from site/src/routes/[[locale=locale]]/syntax/+page.svelte
rename to site/src/routes/[[locale=locale]]/syntax/+page.svx
index aa40de0..c1e3b2e 100644
--- a/site/src/routes/[[locale=locale]]/syntax/+page.svelte
+++ b/site/src/routes/[[locale=locale]]/syntax/+page.svx
@@ -4,17 +4,13 @@
   import Prism from "$lib/ui/Prism.svelte";
 </script>
 
-<h1>Message Syntax</h1>
-<p>
-  T18s uses the <a
-    href="https://unicode-org.github.io/icu/userguide/format_parse/messages"
-    target="_blank"
-    rel="noopener noreferrer">ICU MessageFormat</a
-  > Syntax for messages, the de-facto standard in the JavaScript ecosystem. Let's
-  learn how to use it.
-</p>
-
-<h2>Interpolating Values</h2>
+# Message Syntax
+
+T18s uses the [ICU MessageFormat](https://unicode-org.github.io/icu/userguide/format_parse/messages) Syntax for messages, the de-facto standard in the JavaScript ecosystem. Let's
+learn how to use it.
+
+## Interpolating Values
+
 You can interpolate strings into your messages using curly braces. The value inside
 the braces will be replaced with whatever value you pass when using the message.
 
@@ -22,11 +18,9 @@ the braces will be replaced with whatever value you pass when using the message.
   <Tab><pre>Hello <mark>{"{fullName}"}</mark>, how are you?</pre></Tab>
 </CodeGroup>
 
-<p>
-  You can specify that a value is not a string by adding a type-annotation in
-  the curly braces. The known types are <code>number</code>, <code>date</code>,
-  and <code>time</code>.
-</p>
+You can specify that a value is not a string by adding a type-annotation in
+the curly braces. The known types are `number`, `date`,
+and `time`.
 
 <CodeGroup let:Tab>
   <Tab>
@@ -48,35 +42,25 @@ You can for example specify how long the date should be.
 </CodeGroup>
 
 These formatting options are locale aware and will do the right thing for the
-locale you are using. It uses the <code>Intl</code> API under the hood.
+locale you are using. It uses the `Intl` API under the hood.
 Generally the format for interpolating values is always this.
 
-<ol>
-  <li>Variable name</li>
-  <li>Type</li>
-  <li>Options</li>
-</ol>
-
-<p>
-  The options that are available vary by type. You can find a list of all the
-  options for each type in the <a
-    href="https://unicode-org.github.io/icu/userguide/format_parse/messages"
-    target="_blank"
-    rel="noopener noreferrer">ICU MessageFormat</a
-  >
-  documentation. (We <b>do</b> support skeletons)
-</p>
+1. Varaible Name
+2. Format Type
+3. Format Options
+
+The options that are available vary by type. You can find a list of all the
+options for each type in the
+[ICU MessageFormat](https://unicode-org.github.io/icu/userguide/format_parse/messages)
+documentation.
+(We **do** support skeletons)
 
-<h2>Plurals</h2>
+## Plurals
 
-<p>
-  You can use pluralization to use different messages based on a number. This is
-  useful for things like "1 person" vs "2 people".
-</p>
+You can use pluralization to use different messages based on a number. This is
+useful for things like "1 person" vs "2 people".
 
-<p>
-  You can declare them by using the `plural` type and listing out the options.
-</p>
+You can declare them by using the `plural` type and listing out the options.
 
 <CodeGroup let:Tab>
   <Tab>
@@ -85,9 +69,7 @@ Generally the format for interpolating values is always this.
   </Tab>
 </CodeGroup>
 
-<p />
-
-<p>You can also match an exact number by using an equals sign before it.</p>
+You can also match an exact number by using an equals sign before it.
 
 <CodeGroup let:Tab>
   <Tab>
@@ -96,9 +78,7 @@ Generally the format for interpolating values is always this.
   </Tab>
 </CodeGroup>
 
-<p>
-  You can use the number itself inside the message by using the <code>#</code> placeholder.
-</p>
+You can use the number itself inside the message by using the `#` placeholder.
 
 <CodeGroup let:Tab>
   <Tab>
@@ -112,16 +92,13 @@ Generally the format for interpolating values is always this.
   allowed.
 </Callout>
 
-<h2>Select</h2>
-<p>
-  Select allows you to use one of multiple values based on a key. This is useful
-  for grammatical gender.
-</p>
+## Select
 
-<p>
-  You use it by using the <code>select</code> type, and then listing out each option
-  with a key and a value in curly braces.
-</p>
+Select allows you to use one of multiple values based on a key. This is useful
+for grammatical gender.
+
+You use it by using the `select` type, and then listing out each option
+with a key and a value in curly braces.
 
 <CodeGroup let:Tab>
   <Tab>
@@ -130,9 +107,7 @@ Generally the format for interpolating values is always this.
   >
 </CodeGroup>
 
-<p>
-  The special key <code>other</code> is used as a fallback if no other key matches.
-</p>
+The special key `other` is used as a fallback if no other key matches.
 
 <CodeGroup let:Tab>
   <Tab>
@@ -147,9 +122,10 @@ Generally the format for interpolating values is always this.
   T18s does not, instead relying on typesafety to ensure all values match a key.
 </Callout>
 
-<h2>Selectordinal</h2>
+## Selectordinal
+
 Selectordinal are usefull for stuff like "1st" vs "2nd" vs "3rd". You use them similarly
-to plural, but with the<code>selectordinal</code> type.
+to plural, but with the `selectordinal` type.
 
 <CodeGroup let:Tab>
   <Tab>
@@ -163,13 +139,12 @@ to plural, but with the<code>selectordinal</code> type.
   same ordianl for 1st and 21st.
 </Callout>
 
-<h2>Inline HTML</h2>
-<p>
-  Sometimes you want to dynamically insert HTML into your messages. You can do
-  this by writing tags inside your messages. However, these tags aren't raw html,
-  they too are translated. When formatting the message, you will need to pass in 
-  a callback that takes in the text-content of the tag and returns the html you want to insert.
-</p>
+## Inline HTML
+
+Sometimes you want to dynamically insert HTML into your messages. You can do
+this by writing tags inside your messages. However, these tags aren't raw html,
+they too are translated. When formatting the message, you will need to pass in
+a callback that takes in the text-content of the tag and returns the html you want to insert.
 
 <CodeGroup let:Tab>
   <Tab>
@@ -186,5 +161,3 @@ to plural, but with the<code>selectordinal</code> type.
 <Callout type="info">
   When you use messages containing HTML, don't forget to use svelte's {"{@html}"} directive to render them.
 </Callout>
-
-
diff --git a/site/svelte.config.js b/site/svelte.config.js
index 89f9bfa..1ca1635 100644
--- a/site/svelte.config.js
+++ b/site/svelte.config.js
@@ -1,16 +1,19 @@
-import adapter from '@sveltejs/adapter-static';
+import adapter from "@sveltejs/adapter-static";
+import { mdsvex } from "mdsvex";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	kit: {
-		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
-		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter(),
-		prerender: {
-			entries: ["/", "/404"]
-		}
-	}
+  extensions: [".svelte", ".svx"],
+  preprocess: [mdsvex()],
+  kit: {
+    // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+    // If your environment is not supported or you settled on a specific environment, switch out the adapter.
+    // See https://kit.svelte.dev/docs/adapters for more information about adapters.
+    adapter: adapter(),
+    prerender: {
+      entries: ["/", "/404"],
+    },
+  },
 };
 
 export default config;
diff --git a/site/tailwind.config.js b/site/tailwind.config.js
index dc5e053..0fb7a9c 100644
--- a/site/tailwind.config.js
+++ b/site/tailwind.config.js
@@ -31,13 +31,13 @@ export default {
               code: {
                 color: theme("colors.gray.500"),
                 backgroundColor: theme("colors.stone.50"),
-                borderRadius: theme("borderRadius.DEFAULT"),
+                borderRadius: theme("borderRadius.md"),
                 borderWidth: theme("borderWidth.DEFAULT"),
                 borderColor: theme("colors.stone.200"),
                 paddingLeft: theme("spacing[1.5]"),
                 paddingRight: theme("spacing[1.5]"),
-                paddingTop: theme("spacing.1"),
-                paddingBottom: theme("spacing.1"),
+                paddingTop: theme("spacing.[0.5]"),
+                paddingBottom: theme("spacing.[0.5]"),
               },
             },
           },