diff --git a/website/components/layout/index.tsx b/website/components/layout/index.tsx
new file mode 100644
index 000000000..d8a27fecf
--- /dev/null
+++ b/website/components/layout/index.tsx
@@ -0,0 +1,9 @@
+const Layout = (args) => {
+    return (
+        <>
+            <div>{args.children}</div>
+        </>
+    )
+}
+
+export default Layout
diff --git a/website/next.config.js b/website/next.config.js
index 3a8a89775..305b391cf 100644
--- a/website/next.config.js
+++ b/website/next.config.js
@@ -1,5 +1,8 @@
 const withMDX = require('@next/mdx')({
     extension: /\.mdx?$/,
+    options: {
+        providerImportSource: '@mdx-js/react',
+    },
 })
 
 /** @type {import('next').NextConfig} */
diff --git a/website/package-lock.json b/website/package-lock.json
index c51a61cec..e19ed2127 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -17,6 +17,7 @@
                 "eslint": "8.27.0",
                 "eslint-config-next": "13.0.2",
                 "next": "13.0.2",
+                "next-mdx-remote": "^4.2.0",
                 "prettier": "^2.7.1",
                 "react": "18.2.0",
                 "react-dom": "18.2.0",
@@ -538,6 +539,11 @@
                 "@types/unist": "*"
             }
         },
+        "node_modules/@types/js-yaml": {
+            "version": "4.0.5",
+            "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz",
+            "integrity": "sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA=="
+        },
         "node_modules/@types/json-schema": {
             "version": "7.0.11",
             "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -3713,6 +3719,25 @@
                 }
             }
         },
+        "node_modules/next-mdx-remote": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/next-mdx-remote/-/next-mdx-remote-4.2.0.tgz",
+            "integrity": "sha512-X5RhD7f7b78pH2abbuusObSGgII5l54OdusS/2iXljN7WN1cel6ToLlZeCZcyxx9cR4wmBGQYGongIttDYNmAA==",
+            "dependencies": {
+                "@mdx-js/mdx": "^2.0.0",
+                "@mdx-js/react": "^2.0.0",
+                "vfile": "^5.3.0",
+                "vfile-matter": "^3.0.1"
+            },
+            "engines": {
+                "node": ">=14",
+                "npm": ">=7"
+            },
+            "peerDependencies": {
+                "react": ">=16.x <=18.x",
+                "react-dom": ">=16.x <=18.x"
+            }
+        },
         "node_modules/node-releases": {
             "version": "2.0.6",
             "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
@@ -4937,6 +4962,20 @@
                 "url": "https://opencollective.com/unified"
             }
         },
+        "node_modules/vfile-matter": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/vfile-matter/-/vfile-matter-3.0.1.tgz",
+            "integrity": "sha512-CAAIDwnh6ZdtrqAuxdElUqQRQDQgbbIrYtDYI8gCjXS1qQ+1XdLoK8FIZWxJwn0/I+BkSSZpar3SOgjemQz4fg==",
+            "dependencies": {
+                "@types/js-yaml": "^4.0.0",
+                "is-buffer": "^2.0.0",
+                "js-yaml": "^4.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/vfile-message": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-3.1.2.tgz",
@@ -5452,6 +5491,11 @@
                 "@types/unist": "*"
             }
         },
+        "@types/js-yaml": {
+            "version": "4.0.5",
+            "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.5.tgz",
+            "integrity": "sha512-FhpRzf927MNQdRZP0J5DLIdTXhjLYzeUTmLAu69mnVksLH9CJY3IuSeEgbKUki7GQZm0WqDkGzyxju2EZGD2wA=="
+        },
         "@types/json-schema": {
             "version": "7.0.11",
             "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@@ -7657,6 +7701,17 @@
                 "use-sync-external-store": "1.2.0"
             }
         },
+        "next-mdx-remote": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/next-mdx-remote/-/next-mdx-remote-4.2.0.tgz",
+            "integrity": "sha512-X5RhD7f7b78pH2abbuusObSGgII5l54OdusS/2iXljN7WN1cel6ToLlZeCZcyxx9cR4wmBGQYGongIttDYNmAA==",
+            "requires": {
+                "@mdx-js/mdx": "^2.0.0",
+                "@mdx-js/react": "^2.0.0",
+                "vfile": "^5.3.0",
+                "vfile-matter": "^3.0.1"
+            }
+        },
         "node-releases": {
             "version": "2.0.6",
             "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
@@ -8459,6 +8514,16 @@
                 "vfile": "^5.0.0"
             }
         },
+        "vfile-matter": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/vfile-matter/-/vfile-matter-3.0.1.tgz",
+            "integrity": "sha512-CAAIDwnh6ZdtrqAuxdElUqQRQDQgbbIrYtDYI8gCjXS1qQ+1XdLoK8FIZWxJwn0/I+BkSSZpar3SOgjemQz4fg==",
+            "requires": {
+                "@types/js-yaml": "^4.0.0",
+                "is-buffer": "^2.0.0",
+                "js-yaml": "^4.0.0"
+            }
+        },
         "vfile-message": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-3.1.2.tgz",
diff --git a/website/package.json b/website/package.json
index d18f78b48..bfa881180 100644
--- a/website/package.json
+++ b/website/package.json
@@ -19,6 +19,7 @@
         "eslint": "8.27.0",
         "eslint-config-next": "13.0.2",
         "next": "13.0.2",
+        "next-mdx-remote": "^4.2.0",
         "prettier": "^2.7.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
diff --git a/website/pages/[slug].tsx b/website/pages/[slug].tsx
new file mode 100644
index 000000000..915c55de6
--- /dev/null
+++ b/website/pages/[slug].tsx
@@ -0,0 +1,50 @@
+import type { GetStaticPaths, GetStaticProps } from 'next'
+import { serialize } from 'next-mdx-remote/serialize'
+import fs from 'fs'
+import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
+import path from 'path'
+import Layout from '../components/layout'
+
+type PropsPage = {
+    mdx: MDXRemoteSerializeResult
+}
+
+const PostPage = ({ mdx: mdx }: PropsPage) => {
+    return (
+        <Layout>
+            <MDXRemote {...mdx} />
+        </Layout>
+    )
+}
+
+export default PostPage
+
+type ParsedUrlQuery = {
+    slug: string
+}
+
+export const getStaticPaths: GetStaticPaths<ParsedUrlQuery> = async () => {
+    return {
+        paths: fs.readdirSync(path.join('docs')).map((filename) => ({
+            params: {
+                slug: filename.replace('.mdx', ''),
+            },
+        })),
+        fallback: false,
+    }
+}
+
+export const getStaticProps: GetStaticProps<PropsPage, ParsedUrlQuery> = async (args) => {
+    if (!args.params) {
+        return { notFound: true }
+    }
+    return {
+        props: {
+            slug: args.params.slug,
+            mdx: await serialize(
+                fs.readFileSync(path.join('docs', args.params.slug + '.mdx'), 'utf-8'),
+                { parseFrontmatter: true }
+            ),
+        },
+    }
+}