diff --git a/website/next.config.mjs b/website/next.config.mjs
index 0dd8e68..bd6ff3e 100644
--- a/website/next.config.mjs
+++ b/website/next.config.mjs
@@ -5,6 +5,7 @@
 import fs from 'node:fs';
 import nextMDX from '@next/mdx';
 import rehypePrettyCode from 'rehype-pretty-code';
+import rehypeSlug from 'rehype-slug';
 
 /** @type {NextConfigPlugins} */
 const plugins = [];
@@ -31,8 +32,9 @@ plugins.push(
   nextMDX({
     extension: /\.mdx?$/,
     options: {
+      providerImportSource: '@mdx-js/react',
       remarkPlugins: [],
-      rehypePlugins: [[rehypePrettyCode, options]],
+      rehypePlugins: [[rehypePrettyCode, options], rehypeSlug],
     },
   }),
 );
diff --git a/website/package-lock.json b/website/package-lock.json
index 8ccb9a5..3590c7c 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -14,16 +14,17 @@
         "@tailwindcss/typography": "^0.5.9",
         "@types/mdx": "^2.0.5",
         "@types/node": "^20.8.9",
-        "@types/react": "18.2.6",
+        "@types/react": "^18.2.42",
         "@types/react-dom": "18.2.4",
         "autoprefixer": "10.4.14",
         "eslint": "8.40.0",
         "eslint-config-next": "13.4.3",
-        "next": "^13.5.6",
+        "next": "^14.0.3",
         "postcss": "^8.4.31",
         "react": "18.2.0",
         "react-dom": "^18.2.0",
-        "rehype-pretty-code": "^0.12.0-beta.1",
+        "rehype-pretty-code": "^0.12.0",
+        "rehype-slug": "^6.0.0",
         "shikiji": "^0.7.6",
         "tailwindcss": "3.3.2",
         "typescript": "^5.2.2"
@@ -276,10 +277,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-13.5.6.tgz",
-      "integrity": "sha512-Yac/bV5sBGkkEXmAX5FWPS9Mmo2rthrOPRQQNfycJPkjUAUclomCPH7QFVCDQ4Mp2k2K1SSM6m0zrxYrOwtFQw==",
-      "license": "MIT"
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.3.tgz",
+      "integrity": "sha512-7xRqh9nMvP5xrW4/+L0jgRRX+HoNRGnfJpD+5Wq6/13j3dsdzxO3BCXn7D3hMqsDb+vjZnJq+vI7+EtgrYZTeA=="
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "13.4.3",
@@ -332,13 +332,12 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-13.5.6.tgz",
-      "integrity": "sha512-5nvXMzKtZfvcu4BhtV0KH1oGv4XEW+B+jOfmBdpFI3C7FrB/MfujRpWYSBBO64+qbW8pkZiSyQv9eiwnn5VIQA==",
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.3.tgz",
+      "integrity": "sha512-64JbSvi3nbbcEtyitNn2LEDS/hcleAFpHdykpcnrstITFlzFgB/bW0ER5/SJJwUPj+ZPY+z3e+1jAfcczRLVGw==",
       "cpu": [
         "arm64"
       ],
-      "license": "MIT",
       "optional": true,
       "os": [
         "darwin"
@@ -348,9 +347,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-13.5.6.tgz",
-      "integrity": "sha512-6cgBfxg98oOCSr4BckWjLLgiVwlL3vlLj8hXg2b+nDgm4bC/qVXXLfpLB9FHdoDu4057hzywbxKvmYGmi7yUzA==",
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.3.tgz",
+      "integrity": "sha512-RkTf+KbAD0SgYdVn1XzqE/+sIxYGB7NLMZRn9I4Z24afrhUpVJx6L8hsRnIwxz3ERE2NFURNliPjJ2QNfnWicQ==",
       "cpu": [
         "x64"
       ],
@@ -363,9 +362,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-13.5.6.tgz",
-      "integrity": "sha512-txagBbj1e1w47YQjcKgSU4rRVQ7uF29YpnlHV5xuVUsgCUf2FmyfJ3CPjZUvpIeXCJAoMCFAoGnbtX86BK7+sg==",
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.3.tgz",
+      "integrity": "sha512-3tBWGgz7M9RKLO6sPWC6c4pAw4geujSwQ7q7Si4d6bo0l6cLs4tmO+lnSwFp1Tm3lxwfMk0SgkJT7EdwYSJvcg==",
       "cpu": [
         "arm64"
       ],
@@ -378,9 +377,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-13.5.6.tgz",
-      "integrity": "sha512-cGd+H8amifT86ZldVJtAKDxUqeFyLWW+v2NlBULnLAdWsiuuN8TuhVBt8ZNpCqcAuoruoSWynvMWixTFcroq+Q==",
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.3.tgz",
+      "integrity": "sha512-v0v8Kb8j8T23jvVUWZeA2D8+izWspeyeDGNaT2/mTHWp7+37fiNfL8bmBWiOmeumXkacM/AB0XOUQvEbncSnHA==",
       "cpu": [
         "arm64"
       ],
@@ -393,9 +392,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-13.5.6.tgz",
-      "integrity": "sha512-Mc2b4xiIWKXIhBy2NBTwOxGD3nHLmq4keFk+d4/WL5fMsB8XdJRdtUlL87SqVCTSaf1BRuQQf1HvXZcy+rq3Nw==",
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.3.tgz",
+      "integrity": "sha512-VM1aE1tJKLBwMGtyBR21yy+STfl0MapMQnNrXkxeyLs0GFv/kZqXS5Jw/TQ3TSUnbv0QPDf/X8sDXuMtSgG6eg==",
       "cpu": [
         "x64"
       ],
@@ -408,9 +407,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-13.5.6.tgz",
-      "integrity": "sha512-CFHvP9Qz98NruJiUnCe61O6GveKKHpJLloXbDSWRhqhkJdZD2zU5hG+gtVJR//tyW897izuHpM6Gtf6+sNgJPQ==",
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.3.tgz",
+      "integrity": "sha512-64EnmKy18MYFL5CzLaSuUn561hbO1Gk16jM/KHznYP3iCIfF9e3yULtHaMy0D8zbHfxset9LTOv6cuYKJgcOxg==",
       "cpu": [
         "x64"
       ],
@@ -423,9 +422,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-13.5.6.tgz",
-      "integrity": "sha512-aFv1ejfkbS7PUa1qVPwzDHjQWQtknzAZWGTKYIAaS4NMtBlk3VyA6AYn593pqNanlicewqyl2jUhQAaFV/qXsg==",
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.3.tgz",
+      "integrity": "sha512-WRDp8QrmsL1bbGtsh5GqQ/KWulmrnMBgbnb+59qNTW1kVi1nG/2ndZLkcbs2GX7NpFLlToLRMWSQXmPzQm4tog==",
       "cpu": [
         "arm64"
       ],
@@ -438,9 +437,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-13.5.6.tgz",
-      "integrity": "sha512-XqqpHgEIlBHvzwG8sp/JXMFkLAfGLqkbVsyN+/Ih1mR8INb6YCc2x/Mbwi6hsAgUnqQztz8cvEbHJUbSl7RHDg==",
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.3.tgz",
+      "integrity": "sha512-EKffQeqCrj+t6qFFhIFTRoqb2QwX1mU7iTOvMyLbYw3QtqTw9sMwjykyiMlZlrfm2a4fA84+/aeW+PMg1MjuTg==",
       "cpu": [
         "ia32"
       ],
@@ -453,9 +452,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-13.5.6.tgz",
-      "integrity": "sha512-Cqfe1YmOS7k+5mGu92nl5ULkzpKuxJrP3+4AEuPmrpFZ3BHxTY3TnHmU1On3bFmFFs6FbTcdF58CCUProGpIGQ==",
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.3.tgz",
+      "integrity": "sha512-ERhKPSJ1vQrPiwrs15Pjz/rvDHZmkmvbf/BjPN/UCOI++ODftT0GtasDPi0j+y6PPJi5HsXw+dpRaXUaw4vjuQ==",
       "cpu": [
         "x64"
       ],
@@ -650,10 +649,9 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "18.2.6",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.6.tgz",
-      "integrity": "sha512-wRZClXn//zxCFW+ye/D2qY65UsYP1Fpex2YXorHc8awoNamkMZSvBxwxdYVInsHOZZd2Ppq8isnSzJL5Mpf8OA==",
-      "license": "MIT",
+      "version": "18.2.42",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.42.tgz",
+      "integrity": "sha512-c1zEr96MjakLYus/wPnuWDo1/zErfdU9rNsIGmE+NV71nx88FG9Ttgo5dqorXTu/LImX2f63WBP986gJkMPNbA==",
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -669,17 +667,6 @@
         "@types/react": "*"
       }
     },
-    "node_modules/@types/react-dom/node_modules/@types/react": {
-      "version": "18.2.33",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.33.tgz",
-      "integrity": "sha512-v+I7S+hu3PIBoVkKGpSYYpiBT1ijqEzWpzQD62/jm4K74hPpSP7FF9BnKG6+fg2+62weJYkkBWDJlZt5JO/9hg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/prop-types": "*",
-        "@types/scheduler": "*",
-        "csstype": "^3.0.2"
-      }
-    },
     "node_modules/@types/scheduler": {
       "version": "0.16.5",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.5.tgz",
@@ -2671,6 +2658,11 @@
         "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
       }
     },
+    "node_modules/github-slugger": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz",
+      "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="
+    },
     "node_modules/glob": {
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@@ -2909,6 +2901,18 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-heading-rank": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz",
+      "integrity": "sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-parse-selector": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
@@ -4682,12 +4686,11 @@
       "peer": true
     },
     "node_modules/next": {
-      "version": "13.5.6",
-      "resolved": "https://registry.npmjs.org/next/-/next-13.5.6.tgz",
-      "integrity": "sha512-Y2wTcTbO4WwEsVb4A8VSnOsG1I9ok+h74q0ZdxkwM3EODqrs4pasq7O0iUxbcS9VtWMicG7f3+HAj0r1+NtKSw==",
-      "license": "MIT",
+      "version": "14.0.3",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.0.3.tgz",
+      "integrity": "sha512-AbYdRNfImBr3XGtvnwOxq8ekVCwbFTv/UJoLwmaX89nk9i051AEY4/HAWzU0YpaTDw8IofUpmuIlvzWF13jxIw==",
       "dependencies": {
-        "@next/env": "13.5.6",
+        "@next/env": "14.0.3",
         "@swc/helpers": "0.5.2",
         "busboy": "1.6.0",
         "caniuse-lite": "^1.0.30001406",
@@ -4699,18 +4702,18 @@
         "next": "dist/bin/next"
       },
       "engines": {
-        "node": ">=16.14.0"
+        "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "13.5.6",
-        "@next/swc-darwin-x64": "13.5.6",
-        "@next/swc-linux-arm64-gnu": "13.5.6",
-        "@next/swc-linux-arm64-musl": "13.5.6",
-        "@next/swc-linux-x64-gnu": "13.5.6",
-        "@next/swc-linux-x64-musl": "13.5.6",
-        "@next/swc-win32-arm64-msvc": "13.5.6",
-        "@next/swc-win32-ia32-msvc": "13.5.6",
-        "@next/swc-win32-x64-msvc": "13.5.6"
+        "@next/swc-darwin-arm64": "14.0.3",
+        "@next/swc-darwin-x64": "14.0.3",
+        "@next/swc-linux-arm64-gnu": "14.0.3",
+        "@next/swc-linux-arm64-musl": "14.0.3",
+        "@next/swc-linux-x64-gnu": "14.0.3",
+        "@next/swc-linux-x64-musl": "14.0.3",
+        "@next/swc-win32-arm64-msvc": "14.0.3",
+        "@next/swc-win32-ia32-msvc": "14.0.3",
+        "@next/swc-win32-x64-msvc": "14.0.3"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
@@ -5384,20 +5387,38 @@
       }
     },
     "node_modules/rehype-pretty-code": {
-      "version": "0.12.0-beta.1",
-      "resolved": "https://registry.npmjs.org/rehype-pretty-code/-/rehype-pretty-code-0.12.0-beta.1.tgz",
-      "integrity": "sha512-VQo80illU8oPnSZqyBkDA/TNoyG+jhflYXGTVzpWpielya44DXhHMMv90Lio1kG69pyc/S2OrFe+/qarJm/HDQ==",
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/rehype-pretty-code/-/rehype-pretty-code-0.12.0.tgz",
+      "integrity": "sha512-3Gmp/AMazoM2ojDoLmTWSuDdtYJ3Qj39Q6FY3S+w9u1m0CAPLFUqo2GyC96C/3A9z2yW7SoSsUzUJ2RUwuDwZA==",
       "dependencies": {
         "@types/hast": "^3.0.3",
         "hast-util-to-string": "^3.0.0",
         "parse-numeric-range": "^1.3.0",
         "rehype-parse": "^9.0.0",
-        "shikiji": "^0.7.6",
         "unified": "^11.0.4",
         "unist-util-visit": "^5.0.0"
       },
       "engines": {
-        "node": ">=16"
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "shikiji": "0.7.x"
+      }
+    },
+    "node_modules/rehype-slug": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-6.0.0.tgz",
+      "integrity": "sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "github-slugger": "^2.0.0",
+        "hast-util-heading-rank": "^3.0.0",
+        "hast-util-to-string": "^3.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
       }
     },
     "node_modules/remark-mdx": {
diff --git a/website/package.json b/website/package.json
index 0bec50c..1701554 100644
--- a/website/package.json
+++ b/website/package.json
@@ -15,16 +15,17 @@
     "@tailwindcss/typography": "^0.5.9",
     "@types/mdx": "^2.0.5",
     "@types/node": "^20.8.9",
-    "@types/react": "18.2.6",
+    "@types/react": "^18.2.42",
     "@types/react-dom": "18.2.4",
     "autoprefixer": "10.4.14",
     "eslint": "8.40.0",
     "eslint-config-next": "13.4.3",
-    "next": "^13.5.6",
+    "next": "^14.0.3",
     "postcss": "^8.4.31",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
-    "rehype-pretty-code": "^0.12.0-beta.1",
+    "rehype-pretty-code": "^0.12.0",
+    "rehype-slug": "^6.0.0",
     "shikiji": "^0.7.6",
     "tailwindcss": "3.3.2",
     "typescript": "^5.2.2"
diff --git a/website/src/app/globals.css b/website/src/app/globals.css
index d4c2cd5..34f95e5 100644
--- a/website/src/app/globals.css
+++ b/website/src/app/globals.css
@@ -21,7 +21,7 @@ pre {
 }
 
 code {
-  @apply !text-sm md:!text-base !leading-loose md:!leading-loose;
+  @apply text-sm md:text-base !leading-loose;
 }
 
 pre > code {
diff --git a/website/src/app/index.mdx b/website/src/app/index.mdx
index c007b15..c6144b0 100644
--- a/website/src/app/index.mdx
+++ b/website/src/app/index.mdx
@@ -1,14 +1,15 @@
-[Rehype Pretty Code](https://github.com/atomiks/rehype-pretty-code) is a Rehype
-plugin powered by the [Shikiji](https://github.com/antfu/shikiji) syntax
-highlighter that provides beautiful code blocks for Markdown or MDX.
-
-It works on both the server at build-time (avoiding runtime syntax highlighting)
-and on the client for dynamic highlighting.
+{/* prettier-ignore */}
+<div>
+  [`rehype-pretty-code`](https://github.com/atomiks/rehype-pretty-code) <span className="mix-blend-plus-lighter text-zinc-400/80">is a Rehype plugin powered by the</span>
+  [`shikiji`](https://github.com/antfu/shikiji) <span className="mix-blend-plus-lighter text-zinc-400/80">syntax highlighter that provides beautiful code blocks for Markdown or MDX. It works on both the server at build-time (avoiding runtime syntax highlighting) and on the client for dynamic highlighting.</span>
+</div>
 
 ## Editor-Grade Highlighting
 
-Leverage the accuracy of VS Code's syntax highlighting engine and the popularity
-of its themes ecosystem — use any VS Code theme you want!
+<span className="mix-blend-plus-lighter text-zinc-400/80">
+  Leverage the accuracy of VS Code's syntax highlighting engine and the
+  popularity of its themes ecosystem — use any VS Code theme you want!
+</span>
 
 ```js
 import Document, { Html, Head, Main, NextScript } from 'next/document';
@@ -94,7 +95,7 @@ to.
 ## ANSI Highlighting
 
 ```ansi
-  vite v2.8.6 dev server running at:
+  vite v5.0.0 dev server running at:
 
   > Local: http://localhost:3000/
   > Network: use `--host` to expose
@@ -186,7 +187,7 @@ export default withMDX(nextConfig);
 ## Options
 
 ```ts
-export interface Options {
+interface Options {
   grid?: boolean;
   theme?: Theme | Record<string, Theme>;
   keepBackground?: boolean;
@@ -573,7 +574,3 @@ const options = {
     }),
 };
 ```
-
-## License
-
-MIT • [View on GitHub](https://github.com/atomiks/rehype-pretty-code)
diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx
index e7d5149..67ef792 100644
--- a/website/src/app/page.tsx
+++ b/website/src/app/page.tsx
@@ -1,22 +1,112 @@
+'use client';
+
 import Index from './index.mdx';
+import { MDXProvider } from '@mdx-js/react';
+import * as React from 'react';
+
+function Heading({
+  level,
+  children,
+  ...props
+}: React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLHeadingElement>,
+  HTMLHeadingElement
+> & {
+  level: 1 | 2 | 3 | 4 | 5 | 6;
+}) {
+  const Tag = `h${level}`;
+  return React.createElement(
+    Tag,
+    props,
+    <a href={`#${props.id}`}>{children}</a>,
+  );
+}
 
 export default function Home() {
   return (
-    <div className="prose prose-invert text-zinc-400 px-4 sm:px-6 md:px-8 mx-auto mt-12 mb-6">
-      <h1 className="py-1 mx-auto mt-12 text-4xl sm:text-5xl md:text-6xl font-black text-center text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500">
-        Rehype Pretty Code
-      </h1>
-      <main>
-        <article>
-          <Index />
-        </article>
-      </main>
-      <footer className="w-full max-w-none dark:prose-invert text-center border-t border-zinc-800 py-12 mt-16">
-        Created by <a href="https://twitter.com/atomiksdev">@atomiks</a>,{' '}
-        <a href="https://twitter.com/ren_riz">@ren_riz</a>,{' '}
-        <a href="https://twitter.com/silvenon">@silvenon</a>,{' '}
-        <a href="https://github.com/ttwrpz">@ttwrpz</a>, and other contributors
+    <>
+      {' '}
+      <header
+        className="flex items-center pt-[4rem] pb-[35rem] -mb-[35rem]"
+        style={{
+          background: `linear-gradient(
+            0deg,
+            hsl(240deg 6% 10%) 0%,
+            hsl(232deg 13% 13%) 17%,
+            hsl(225deg 20% 17%) 28%,
+            hsl(220deg 27% 20%) 37%,
+            hsl(215deg 34% 22%) 44%,
+            hsl(213deg 34% 25%) 51%,
+            hsl(215deg 28% 29%) 57%,
+            hsl(216deg 23% 33%) 63%,
+            hsl(218deg 19% 37%) 68%,
+            hsl(219deg 16% 41%) 73%,
+            hsl(256deg 10% 46%) 78%,
+            hsl(308deg 9% 49%) 82%,
+            hsl(341deg 14% 55%) 85%,
+            hsl(3deg 17% 60%) 89%,
+            hsl(12deg 19% 61%) 91%,
+            hsl(11deg 18% 62%) 94%,
+            hsl(11deg 17% 63%) 96%,
+            hsl(10deg 15% 64%) 98%,
+            hsl(10deg 13% 65%) 100%
+          )`,
+        }}
+      >
+        <h1 className="mx-auto font-mono text-3xl sm:text-4xl md:text-5xl font-semibold text-center text-amber-100/70 mb-8">
+          rehype-pretty-code
+        </h1>
+      </header>
+      <div className="prose prose-invert text-gray-300/70 px-4 sm:px-6 md:px-8 mx-auto mt-12 mb-6 relative z-1">
+        <main>
+          <article>
+            <MDXProvider
+              components={{
+                h1: (props) => <Heading level={1} {...props} />,
+                h2: (props) => <Heading level={2} {...props} />,
+                h3: (props) => <Heading level={3} {...props} />,
+                h4: (props) => <Heading level={4} {...props} />,
+                h5: (props) => <Heading level={5} {...props} />,
+                h6: (props) => <Heading level={6} {...props} />,
+              }}
+            >
+              <Index />
+            </MDXProvider>
+          </article>
+        </main>
+      </div>
+      <footer
+        className="w-full text-amber-100/70 !max-w-none prose dark:prose-invert text-center pb-[10rem] pt-[35rem] -mt-[25rem]"
+        style={{
+          background: `linear-gradient(
+            180deg,
+            hsl(240deg 6% 10%) 0%,
+            hsl(232deg 13% 13%) 17%,
+            hsl(225deg 20% 17%) 28%,
+            hsl(220deg 27% 20%) 37%,
+            hsl(215deg 34% 22%) 44%,
+            hsl(213deg 34% 25%) 51%,
+            hsl(215deg 28% 29%) 57%,
+            hsl(216deg 23% 33%) 63%,
+            hsl(218deg 19% 37%) 68%,
+            hsl(219deg 16% 41%) 73%,
+            hsl(256deg 10% 46%) 78%,
+            hsl(308deg 9% 49%) 82%,
+            hsl(341deg 14% 55%) 85%,
+            hsl(3deg 17% 60%) 89%,
+            hsl(12deg 19% 61%) 91%,
+            hsl(11deg 18% 62%) 94%,
+            hsl(11deg 17% 63%) 96%,
+            hsl(10deg 15% 64%) 98%,
+            hsl(10deg 13% 65%) 100%
+          )`,
+        }}
+      >
+        MIT License •{' '}
+        <a href="https://github.com/atomiks/rehype-pretty-code">
+          View on GitHub
+        </a>
       </footer>
-    </div>
+    </>
   );
 }
diff --git a/website/tailwind.config.js b/website/tailwind.config.js
index 8128cc5..89d709a 100644
--- a/website/tailwind.config.js
+++ b/website/tailwind.config.js
@@ -3,8 +3,13 @@ const colors = require('tailwindcss/colors');
 const linkHeadingStyles = {
   color: colors.gray[100],
   borderBottomColor: 'transparent',
+  borderRadius: 3,
+  boxShadow: `0 0 0 0.4rem transparent`,
   '&:hover': {
-    color: `${colors.gray[900]}`,
+    color: 'none',
+    borderBottomColor: 'transparent',
+    background: colors.gray[100],
+    boxShadow: `0 0 0 0.4rem ${colors.gray[100]}`,
   },
 };
 
@@ -18,12 +23,25 @@ module.exports = {
           css: {
             pre: {
               background: 'rgba(205, 200, 255, 0.05)',
+              code: {
+                fontSize: '1rem',
+              },
             },
             'h2 a': linkHeadingStyles,
             'h3 a': linkHeadingStyles,
             'h4 a': linkHeadingStyles,
             'h5 a': linkHeadingStyles,
             'h6 a': linkHeadingStyles,
+            'h3 a:has(code)': {
+              boxShadow: `0 0 0 0.3rem transparent`,
+              '&:hover': {
+                background: colors.teal[900],
+                boxShadow: `0 0 0 0.3rem ${colors.teal[900]}`,
+              },
+            },
+            figure: {
+              margin: 0,
+            },
             blockquote: {
               fontSize: '90%',
               color: colors.zinc[500],
@@ -33,14 +51,17 @@ module.exports = {
             },
             a: {
               textDecoration: 'none',
-              borderBottom: `2px solid ${colors.cyan[800]}`,
-              color: colors.cyan[400],
-              transition:
-                'color 0.2s ease, border-color 0.2s ease, background 0.2s ease',
+              borderBottom: `1px solid ${colors.pink[300]}`,
+              color: colors.pink[200],
+              borderRadius: 1,
+              transitionProperty: 'color, border-color, background, box-shadow',
+              transitionDuration: '0.18s',
+              boxShadow: `0 0 0 0.2rem transparent`,
               '&:hover': {
-                color: `${colors.zinc[900]} !important`,
-                borderBottomColor: `${colors.cyan[200]} !important`,
-                background: colors.cyan[200],
+                color: `${colors.zinc[900]}`,
+                borderBottomColor: `${colors.pink[200]}`,
+                background: colors.pink[200],
+                boxShadow: `0 0 0 0.2rem ${colors.pink[200]}`,
               },
             },
             code: {
@@ -49,6 +70,9 @@ module.exports = {
               '&::after': { content: `unset !important` },
               fontWeight: 'normal',
             },
+            'a code': {
+              fontSize: '1em',
+            },
             '[data-rehype-pretty-code-fragment]:nth-of-type(2) pre': {
               '[data-line]::before': {
                 content: 'counter(line)',