diff --git a/src/components/app-wrapper.tsx b/src/components/app-wrapper.tsx
index 07084c56..266dd8fc 100644
--- a/src/components/app-wrapper.tsx
+++ b/src/components/app-wrapper.tsx
@@ -1,6 +1,4 @@
 import React from 'react';
-import { MDXProvider } from '@mdx-js/react';
-import { MDXComponents } from '@components/mdx';
 import { AppStateProvider } from '@components/app-state';
 import { MdxOverrides } from '@components/mdx/overrides';
 import { ProgressBar } from '@components/progress-bar';
@@ -17,11 +15,9 @@ export const AppWrapper: React.FC<any> = ({ children, isHome }) => {
       <MdxOverrides />
       <ColorModes />
       <ProgressBar />
-      <MDXProvider components={MDXComponents}>
-        <AppStateProvider>
-          <BaseLayout isHome={isHome}>{children}</BaseLayout>
-        </AppStateProvider>
-      </MDXProvider>
+      <AppStateProvider>
+        <BaseLayout isHome={isHome}>{children}</BaseLayout>
+      </AppStateProvider>
     </>
   );
 };
diff --git a/src/components/mdx/md-contents.tsx b/src/components/mdx/md-contents.tsx
index 56a72092..de530967 100644
--- a/src/components/mdx/md-contents.tsx
+++ b/src/components/mdx/md-contents.tsx
@@ -9,7 +9,8 @@ import dynamic from 'next/dynamic';
 import { getHeadingStyles } from '@components/mdx/typography';
 import { border } from '@common/utils';
 import { getCapsizeStyles } from '@components/mdx/typography';
-
+import { MDXProvider } from '@mdx-js/react';
+import { MDXComponents } from '@components/mdx';
 export const styleOverwrites = {
   '& > section': {
     '&:nth-child(2)': {
@@ -256,7 +257,7 @@ export const MDContents: React.FC<any> = ({ pageTop: PageTop = null, headings, c
         pr={!isHome && ['0', '0', '0', 'extra-loose']}
       >
         {PageTop && <PageTop />}
-        {children}
+        <MDXProvider components={MDXComponents}>{children}</MDXProvider>
       </ContentWrapper>
       {!isHome ? (
         <Box