diff --git a/src/theme/MDXPage/index.d.ts b/src/theme/MDXPage/index.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..34b29589d5244b1c04b88e0541902778da2911d9
--- /dev/null
+++ b/src/theme/MDXPage/index.d.ts
@@ -0,0 +1,4 @@
+/// <reference types="@docusaurus/plugin-content-pages" />
+/// <reference types="react" />
+import type { Props } from '@theme/MDXPage';
+export default function MDXPage(props: Props): JSX.Element;
diff --git a/src/theme/MDXPage/index.js b/src/theme/MDXPage/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..fd944c07d49839d70bb637eeeaac96a0547be439
--- /dev/null
+++ b/src/theme/MDXPage/index.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import clsx from 'clsx';
+import {
+  PageMetadata,
+  HtmlClassNameProvider,
+  ThemeClassNames,
+} from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
+import MDXContent from '@theme/MDXContent';
+import TOC from '@theme/TOC';
+import styles from './styles.module.css';
+export default function MDXPage(props) {
+  const {content: MDXPageContent} = props;
+  const {
+    metadata: {title, description, frontMatter},
+  } = MDXPageContent;
+  const {wrapperClassName, hide_table_of_contents: hideTableOfContents} =
+    frontMatter;
+  return (
+    <HtmlClassNameProvider
+      className={clsx(
+        wrapperClassName ?? ThemeClassNames.wrapper.mdxPages,
+        ThemeClassNames.page.mdxPage,
+      )}>
+      <PageMetadata title={title} description={description} />
+      <Layout>
+        <main className="container container--fluid margin-vert--lg">
+          <div className={clsx('row', styles.mdxPageWrapper)}>
+            <div className={clsx('col', !hideTableOfContents && 'col--8')}>
+              <MDXContent>
+                <MDXPageContent />
+              </MDXContent>
+            </div>
+            {!hideTableOfContents && MDXPageContent.toc && (
+              <div className="col col--3">
+                <TOC
+                  toc={MDXPageContent.toc}
+                  minHeadingLevel={frontMatter.toc_min_heading_level}
+                  maxHeadingLevel={frontMatter.toc_max_heading_level}
+                />
+              </div>
+            )}
+          </div>
+        </main>
+      </Layout>
+    </HtmlClassNameProvider>
+  );
+}
diff --git a/src/theme/MDXPage/styles.module.css b/src/theme/MDXPage/styles.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..3392df2fe1657d2a8391064ea0f1b77d622af07e
--- /dev/null
+++ b/src/theme/MDXPage/styles.module.css
@@ -0,0 +1,3 @@
+.mdxPageWrapper {
+  justify-content: center;
+}