diff --git a/site/next.config.js b/site/next.config.js
index f3c606f..65fd246 100644
--- a/site/next.config.js
+++ b/site/next.config.js
@@ -1,6 +1,11 @@
 const withTM = require('next-transpile-modules')(['react-hot-toast']);
+const remarkSlugs = require('rehype-slug');
+
 const withMDX = require('@next/mdx')({
-  extension: /\.mdx?$/,
+  extension: /.mdx?$/,
+  options: {
+    rehypePlugins: [remarkSlugs],
+  },
 });
 const withPlugins = require('next-compose-plugins');
 
@@ -8,7 +13,7 @@ const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => {
   return Object.assign({}, nextConfig, {
     webpack(config, options) {
       config.module.rules.push({
-        test: /\.svg$/,
+        test: /.svg$/,
         use: ['@svgr/webpack'],
       });
 
diff --git a/site/package-lock.json b/site/package-lock.json
index 84275fc..b1519da 100644
--- a/site/package-lock.json
+++ b/site/package-lock.json
@@ -3272,6 +3272,11 @@
         }
       }
     },
+    "emoji-regex": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-6.1.1.tgz",
+      "integrity": "sha1-xs0OwbBkLio8Z6ETfvxeeW2k+I4="
+    },
     "emojis-list": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
@@ -3928,6 +3933,14 @@
       "integrity": "sha1-l/tdlr/eiXMxPyDoKI75oWf6ZM4=",
       "optional": true
     },
+    "github-slugger": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.3.0.tgz",
+      "integrity": "sha512-gwJScWVNhFYSRDvURk/8yhcFBee6aFjye2a7Lhb2bUyRulpIoek9p0I9Kt7PT67d/nUlZbFu8L9RLiA0woQN8Q==",
+      "requires": {
+        "emoji-regex": ">=6.0.0 <=6.1.1"
+      }
+    },
     "glob": {
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@@ -3991,6 +4004,11 @@
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
       "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
     },
+    "goober": {
+      "version": "2.0.37",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.0.37.tgz",
+      "integrity": "sha512-wgj5C7IJX2+MyHZ4TgOA+hLL1mCDW+jGorQ5KCMLF1ofE9gQkfbo1s8txIrzIsAX65XRTm0qaipolId2KMYUkw=="
+    },
     "graceful-fs": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
@@ -4127,6 +4145,16 @@
         "web-namespaces": "^1.0.0"
       }
     },
+    "hast-util-has-property": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hast-util-has-property/-/hast-util-has-property-1.0.4.tgz",
+      "integrity": "sha512-ghHup2voGfgFoHMGnaLHOjbYFACKrRh9KFttdCzMCbFoBMJXiNi2+XTrPP8+q6cDJM/RSqlCfVWrjp1H201rZg=="
+    },
+    "hast-util-heading-rank": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-1.0.1.tgz",
+      "integrity": "sha512-P6Hq7RCky9syMevlrN90QWpqWDXCxwIVOfQR2rK6P4GpY4bqjKEuCzoWSRORZ7vz+VgRpLnXimh+mkwvVFjbyQ=="
+    },
     "hast-util-parse-selector": {
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz",
@@ -4161,6 +4189,11 @@
         "zwitch": "^1.0.0"
       }
     },
+    "hast-util-to-string": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-1.0.4.tgz",
+      "integrity": "sha512-eK0MxRX47AV2eZ+Lyr18DCpQgodvaS3fAQO2+b9Two9F5HEoRPhiUMNzoXArMJfZi2yieFzUBMRl3HNJ3Jus3w=="
+    },
     "hastscript": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-6.0.0.tgz",
@@ -10106,11 +10139,6 @@
           "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
           "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg=="
         },
-        "goober": {
-          "version": "2.0.18",
-          "resolved": "https://registry.npmjs.org/goober/-/goober-2.0.18.tgz",
-          "integrity": "sha512-XaYq9GqRkWHS0DFPQZQLhrKGWWbiz+ydiEbMRN8eGJZ7enDjmWnRv3RWn5RwdukjnHUA6b/AQcf4QWjellKOCw=="
-        },
         "graceful-fs": {
           "version": "4.2.4",
           "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
@@ -15073,6 +15101,18 @@
         }
       }
     },
+    "rehype-slug": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-4.0.1.tgz",
+      "integrity": "sha512-KIlJALf9WfHFF21icwTd2yI2IP+RQRweaxH9ChVGQwRYy36+hiomG4ZSe0yQRyCt+D/vE39LbAcOI/h4O4GPhA==",
+      "requires": {
+        "github-slugger": "^1.1.1",
+        "hast-util-has-property": "^1.0.0",
+        "hast-util-heading-rank": "^1.0.0",
+        "hast-util-to-string": "^1.0.0",
+        "unist-util-visit": "^2.0.0"
+      }
+    },
     "remark-footnotes": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/remark-footnotes/-/remark-footnotes-2.0.0.tgz",
diff --git a/site/package.json b/site/package.json
index 31e31a4..d482826 100644
--- a/site/package.json
+++ b/site/package.json
@@ -20,6 +20,7 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-hot-toast": "file:../",
+    "rehype-slug": "^4.0.1",
     "tailwindcss": "^2.1.2"
   },
   "devDependencies": {
diff --git a/site/pages/docs/toast.mdx b/site/pages/docs/toast.mdx
index 4b59d1b..e460e7d 100644
--- a/site/pages/docs/toast.mdx
+++ b/site/pages/docs/toast.mdx
@@ -46,7 +46,7 @@ toast('Hello World', {
 toast('Hello World');
 ```
 
-The most basic variant. It does not have an icon by default, but you can provide one via the options.
+The most basic variant. It does not have an icon by default, but you can provide one via the options. If you don't want any default styles, use `toast.custom()` instead.
 
 ### Success
 
@@ -78,7 +78,7 @@ Creates a custom notification with JSX without default styles.
 toast.loading('Waiting...');
 ```
 
-This will create a loading notification. Most likely, you want to update it manually afterwards. For a friendly alternative, check out `toast.promise()`, which takes care of that automatically.
+This will create a loading notification. Most likely, you want to update it afterwards. For a friendly alternative, check out `toast.promise()`, which takes care of that automatically.
 
 ### Promise
 
@@ -153,7 +153,7 @@ You can dismiss all toasts at once, by leaving out the `toastId`.
 #### Dismiss all toasts at one
 
 ```js
-toast.dismiss()
+toast.dismiss();
 ```
 
 To remove toasts instantly without any animations, use `toast.remove`.
@@ -161,11 +161,11 @@ To remove toasts instantly without any animations, use `toast.remove`.
 #### Remove toasts instanstly
 
 ```js
-toast.remove(toastId)
+toast.remove(toastId);
 
 // or
 
-toast.remove()
+toast.remove();
 ```
 
 ### Update an existing toast
diff --git a/site/pages/docs/version-2.mdx b/site/pages/docs/version-2.mdx
index 1fd41d1..f511a28 100644
--- a/site/pages/docs/version-2.mdx
+++ b/site/pages/docs/version-2.mdx
@@ -11,30 +11,37 @@ export default ({ children, meta }) => <Layout meta={meta}>{children}</Layout>;
 
 This release is all about **flexibility**. It allows you to create the notification system of your dreams, even simpler. Before we dig deeper into the new APIs, check out what's included in this release:
 
-<div className="text-lg">
-<span style={{ margin: '10px' }}>✨</span> <span className="font-semibold">toast.custom()</span> <span className="text-toast-700">- Dispatch components as toast</span>
+<div className="">
+<span style={{ margin: '10px' }}>✨</span> <a href="#introducing-toastcustom" className="font-semibold">toast.custom()</a> <span className="">- Dispatch components as toast</span>
 <br />
 
-<span style={{ margin: '10px' }}>👀</span> <span className="font-semibold">
+<span style={{ margin: '10px' }}>👀</span> <a
+  href="#better-accessibility"
+  className="font-semibold"
+>
   Reduced-motion support
-</span> <span className="text-toast-700">
-  - Automatically adapts to system preference
-</span>
+</a> <span className="">- Automatically adapts to system preference</span>
 <br />
 
-<span style={{ margin: '10px' }}>🔀</span> <span className="font-semibold">
+<span style={{ margin: '10px' }}>🔀</span> <a
+  href="#per-toast-positioning"
+  className="font-semibold"
+>
   Individually position toasts{' '}
-</span> <span className="text-toast-700"></span>
+</a> <span className=""></span>
 <br />
-<span style={{ margin: '10px' }}>
-  🧈
-</span> <span className="font-semibold">Smoother exit animations</span> <span className="text-toast-700"></span>
+<span style={{ margin: '10px' }}>🧈</span> <a
+  href="#smoother-exit-animation"
+  className="font-semibold"
+>
+  Smoother exit animations
+</a> <span className=""></span>
 <br />
 
-<span style={{ margin: '10px' }}>⚙️</span> <span className="font-semibold">Custom Renderer API</span> <span className="text-toast-700">- Supply your own render function</span>
+<span style={{ margin: '10px' }}>⚙️</span> <a href="#custom-renderer-api" className="font-semibold">Custom Renderer API</a> <span className="">- Supply your own render function</span>
 </div>
 
-As well as a many other improvements and fixes.
+As well as a many [other improvements and fixes](#changelog).
 
 ## Introducing `toast.custom()`
 
@@ -136,7 +143,7 @@ The offset is now controlled by the Toaster and can be changed by overwriting th
 
 ## Custom Renderer API
 
-You can now use the [`<Toaster/>`](/docs/toaster) to render your own components. Pass in a function that receives a [Toast](https://github.com/timolins/react-hot-toast/blob/main/src/core/types.ts#L34) as the first argument, allowing you to render whatever you please.
+You can now use the [`<Toaster/>`](/docs/toaster#using-a-custom-render-function) to render your own components. Pass in a function that receives a [Toast](https://github.com/timolins/react-hot-toast/blob/main/src/core/types.ts#L34) as the first argument, allowing you to render whatever you please.
 
 This is a great alternative if you are using [`useToaster()`](/docs/use-toaster) to render create custom notfications.