diff --git a/docs/components/app/Header.vue b/docs/components/app/Header.vue
index 8a1bac663..770a9150d 100644
--- a/docs/components/app/Header.vue
+++ b/docs/components/app/Header.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="w-full navbar bg-neutral text-neutral-content">
-    <div class="flex-none">
+    <div class="flex-none" :class="{ 'lg:hidden': $route.path !== '/' }">
       <label for="sidebar" class="btn btn-square btn-ghost">
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -17,12 +17,20 @@
         </svg>
       </label>
     </div>
-    <!-- <AppLogo class="flex-none h-8 mr-3" /> -->
     <div class="flex-1 px-2 mx-2">
       <span class="text-lg font-bold">{{ title }}</span>
     </div>
     <div class="flex-none hidden lg:block">
-      <AppMenu class="horizontal" />
+      <ul class="horizontal menu">
+        <li v-for="(link, key) of links" :key="key">
+          <component
+            :is="link.component"
+            class="rounded-btn"
+            v-bind="link.props"
+            v-text="link.text"
+          />
+        </li>
+      </ul>
     </div>
   </div>
 </template>
@@ -35,5 +43,30 @@ export default {
       required: true,
     },
   },
+
+  data: () => ({
+    links: [
+      {
+        component: "NuxtLink",
+        text: "Home",
+        props: { to: "/" },
+      },
+      {
+        component: "NuxtLink",
+        text: "API",
+        props: { to: "/api" },
+      },
+      // TODO: Add guide.
+      // TODO: Add external icon.
+      {
+        component: "a",
+        text: "GitHub",
+        props: {
+          href: "https://github.com/druxt/druxt.js",
+          target: "_blank",
+        },
+      },
+    ],
+  }),
 };
 </script>
diff --git a/docs/components/app/Sidebar.vue b/docs/components/app/Sidebar.vue
index da8b45928..5a06e400b 100644
--- a/docs/components/app/Sidebar.vue
+++ b/docs/components/app/Sidebar.vue
@@ -1,17 +1,34 @@
 <template>
-  <div class="p-4 overflow-y-auto w-80 bg-base-100">
+  <div class="px-1 pt-20 overflow-y-auto w-80 bg-base-100">
+    <!-- Main menu -->
     <AppMenu class="mb-5">
       <li slot="title" class="menu-title">
         <span>Navigation</span>
       </li>
     </AppMenu>
 
-    <ul class="menu">
+    <!-- Recent/Pinned documents -->
+    <ul v-if="$store.state.recent.length" class="mb-5 menu">
       <li slot="title" class="menu-title">
-        <span>Modules</span>
+        <span>Recent documents</span>
       </li>
-      <li v-for="module of $store.state.modules" :key="module">
-        <NuxtLink class="rounded-btn" :to="`/api/packages/${module}`" v-text="module" />
+      <li v-for="(item, key) of $store.state.recent" :key="key">
+        <NuxtLink class="rounded-btn" :to="item.to" v-text="item.text" />
+      </li>
+    </ul>
+
+    <!-- API menu -->
+    <ul class="mb-5 menu">
+      <li slot="title" class="menu-title">
+        <span>API documents</span>
+      </li>
+      <li>
+        <NuxtLink class="rounded-btn" to="/api/packages">Packages</NuxtLink>
+        <!-- <ul class="menu">
+          <li v-for="module of $store.state.modules" :key="module">
+            <NuxtLink class="rounded-btn" :to="`/api/packages/${module}`" v-text="module" />
+          </li>
+        </ul> -->
       </li>
     </ul>
   </div>
diff --git a/docs/layouts/default.vue b/docs/layouts/default.vue
index 3f3a547e1..fd3936d2a 100644
--- a/docs/layouts/default.vue
+++ b/docs/layouts/default.vue
@@ -1,13 +1,17 @@
 <template>
   <div>
-    <AppHeader class="absolute z-100" title="DruxtJS" />
+    <AppHeader class="absolute z-50 h-20" title="DruxtJS" />
 
-    <div class="shadow bg-base-200 drawer h-screen pt-15">
+    <div
+      class="shadow bg-base-200 drawer h-screen pt-20"
+      :class="{ 'drawer-mobile': $route.path !== '/' }"
+    >
       <input id="sidebar" type="checkbox" class="drawer-toggle" />
 
       <div class="flex flex-col drawer-content">
         <Nuxt />
       </div>
+
       <div class="drawer-side">
         <label for="sidebar" class="drawer-overlay"></label>
         <AppSidebar />
diff --git a/docs/package.json b/docs/package.json
index 9b8671ab4..bf67d822e 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@nuxt/content": "^1.14.0",
+    "@tailwindcss/typography": "^0.4.1",
     "core-js": "^3.16.2",
     "daisyui": "^1.13.2",
     "nuxt": "^2.15.8"
diff --git a/docs/pages/api.vue b/docs/pages/api.vue
new file mode 100644
index 000000000..34e5edc99
--- /dev/null
+++ b/docs/pages/api.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="container mx-auto my-20 px-5">
+    <h1 class="text-4xl border-b mb-10">API Documentation</h1>
+
+    <NuxtChild />
+  </div>
+</template>
diff --git a/docs/pages/api/_.vue b/docs/pages/api/_.vue
index 1fa996a37..29c376429 100644
--- a/docs/pages/api/_.vue
+++ b/docs/pages/api/_.vue
@@ -1,31 +1,60 @@
 <template>
-  <div class="container mx-auto my-20">
-    <NuxtContent v-if="document" :document="document" />
+  <div>
+    <!-- TODO: Add link to GitHub -->
+    <div class="card shadow bg-white mb-10">
+      <div class="card-body">
+        <span class="mb-3 text-lg font-mono">{{ dir }}</span>
+        <h2 class="mb-5 text-3xl">{{ title }}</h2>
 
-    <div v-else>
-      <div v-for="item of response" :key="item.path">
-        <NuxtLink :to="item.path" v-text="item.slug" />
+        <div>
+          <!-- TODO: Link to module page? -->
+          <div v-if="module" class="badge badge-primary">{{ module }}</div>
+          <!-- TODO: Add file type badge; Component, Mixin, etc -->
+        </div>
       </div>
     </div>
+
+    <NuxtContent
+      v-if="document"
+      class="
+        prose prose-green prose-sm
+        sm:prose sm:prose-green
+        lg:prose-lg
+        xl:prose-xl
+      "
+      :document="document"
+    />
   </div>
 </template>
 
 <script>
 export default {
-  async asyncData({ $content, params, error }) {
+  name: "AppApiDocument",
+
+  async asyncData({ $content, error, params, store, route }) {
     let response;
     try {
-      response = await $content("api/", params.pathMatch || "index").fetch();
+      const path =
+        params.pathMatch + (params.pathMatch.endsWith("/") ? "index" : "");
+      response = await $content("api/", path).fetch();
+      if (Array.isArray(response)) {
+        response = await $content("api/", params.pathMatch + "/index").fetch();
+      }
     } catch (e) {
       return error({ message: "Document not found" });
     }
 
-    return { response };
+    store.commit("addRecent", { text: response.title, to: route.path });
+
+    return { document: response };
   },
 
   computed: {
-    document: ({ response }) =>
-      !Array.isArray(response) ? response : undefined,
+    module: ({ document }) => document.dir.split("/packages/")[1],
+
+    dir: ({ document }) => document.dir.replace("/api/", "/src/"),
+
+    title: ({ document }) => document.title,
   },
 };
 </script>
diff --git a/docs/pages/api/index.vue b/docs/pages/api/index.vue
index 25ade8b78..ee0c8ac51 100644
--- a/docs/pages/api/index.vue
+++ b/docs/pages/api/index.vue
@@ -1,15 +1,7 @@
 <template>
-  <div class="container mx-auto my-20">
-    <h1 class="text-4xl border-b-3 mb-10">API Documentation</h1>
+  <div>
+    <h2 class="text-2xl border-b mb-10">Table of contents</h2>
 
-    <h2 class="text-2xl">Modules</h2>
-    <ul class="menu">
-      <li
-        v-for="module of $store.state.modules"
-        :key="module"
-      >
-        <NuxtLink :to="`/api/packages/${module}`" v-text="module" />
-      </li>
-    </ul>
+    <!-- TODO: Add table of contents menu -->
   </div>
 </template>
diff --git a/docs/pages/api/packages.vue b/docs/pages/api/packages.vue
new file mode 100644
index 000000000..2fd1fe7a9
--- /dev/null
+++ b/docs/pages/api/packages.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h2 class="text-2xl border-b mb-10">Modules</h2>
+
+    <ul class="menu">
+      <li
+        v-for="module of $store.state.modules"
+        :key="module"
+      >
+        <NuxtLink :to="`/api/packages/${module}/`" v-text="module" />
+      </li>
+    </ul>
+  </div>
+</template>
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
index db44ff362..421dd528f 100644
--- a/docs/tailwind.config.js
+++ b/docs/tailwind.config.js
@@ -1,5 +1,9 @@
 module.exports = {
-  purge: [],
+  mode: 'jit',
+  purge: [
+    './components/**/*.{js,jsx,ts,tsx,vue}',
+    './pages/**/*.{js,jsx,ts,tsx,vue}',
+  ],
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},
@@ -9,17 +13,18 @@ module.exports = {
   },
   plugins: [
     require('daisyui'),
+    require('@tailwindcss/typography'),
   ],
   daisyui: {
     themes: [
       {
         druxt: {
-          'primary': '#3498DB',           /* Primary color */
-          'primary-focus': '#2F495E',     /* Primary color - focused */
+          'primary': '#53b0eb',           /* Primary color */
+          'primary-focus': '#0678be',     /* Primary color - focused */
           'primary-content': '#ffffff',   /* Foreground content color to use on primary color */
 
-          'secondary': '#108775',         /* Secondary color */
-          'secondary-focus': '#2F495E',   /* Secondary color - focused */
+          'secondary': '#41b883',         /* Secondary color */
+          'secondary-focus': '#3b8070',   /* Secondary color - focused */
           'secondary-content': '#ffffff', /* Foreground content color to use on secondary color */
 
           'accent': '#37cdbe',            /* Accent color */
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 801bf2185..6bd0206ff 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -1822,6 +1822,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tailwindcss/typography@npm:^0.4.1":
+  version: 0.4.1
+  resolution: "@tailwindcss/typography@npm:0.4.1"
+  dependencies:
+    lodash.castarray: ^4.4.0
+    lodash.isplainobject: ^4.0.6
+    lodash.merge: ^4.6.2
+    lodash.uniq: ^4.5.0
+  peerDependencies:
+    tailwindcss: ">=2.0.0"
+  checksum: d234509964f59389d00ccc0529b033a5aa670a93149a48520cd2088d102b894cc746146052ea844a926bbea4b16904f5f6b2874399511bf78d55631bdb88ac68
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:1":
   version: 1.1.2
   resolution: "@tootallnate/once@npm:1.1.2"
@@ -4959,6 +4973,7 @@ __metadata:
   dependencies:
     "@nuxt/content": ^1.14.0
     "@nuxtjs/tailwindcss": ^4.2.1
+    "@tailwindcss/typography": ^0.4.1
     core-js: ^3.16.2
     daisyui: ^1.13.2
     nuxt: ^2.15.8
@@ -7521,6 +7536,13 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"lodash.castarray@npm:^4.4.0":
+  version: 4.4.0
+  resolution: "lodash.castarray@npm:4.4.0"
+  checksum: fca8c7047e0ae2738b0b2503fb00157ae0ff6d8a1b716f87ed715b22560e09de438c75b65e01a7e44ceb41c5b31dce2eb576e46db04beb9c699c498e03cbd00f
+  languageName: node
+  linkType: hard
+
 "lodash.debounce@npm:^4.0.8":
   version: 4.0.8
   resolution: "lodash.debounce@npm:4.0.8"
@@ -7528,6 +7550,13 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"lodash.isplainobject@npm:^4.0.6":
+  version: 4.0.6
+  resolution: "lodash.isplainobject@npm:4.0.6"
+  checksum: 29c6351f281e0d9a1d58f1a4c8f4400924b4c79f18dfc4613624d7d54784df07efaff97c1ff2659f3e085ecf4fff493300adc4837553104cef2634110b0d5337
+  languageName: node
+  linkType: hard
+
 "lodash.kebabcase@npm:^4.1.1":
   version: 4.1.1
   resolution: "lodash.kebabcase@npm:4.1.1"
@@ -7542,6 +7571,13 @@ fsevents@~2.3.2:
   languageName: node
   linkType: hard
 
+"lodash.merge@npm:^4.6.2":
+  version: 4.6.2
+  resolution: "lodash.merge@npm:4.6.2"
+  checksum: ad580b4bdbb7ca1f7abf7e1bce63a9a0b98e370cf40194b03380a46b4ed799c9573029599caebc1b14e3f24b111aef72b96674a56cfa105e0f5ac70546cdc005
+  languageName: node
+  linkType: hard
+
 "lodash.template@npm:^4.5.0":
   version: 4.5.0
   resolution: "lodash.template@npm:4.5.0"