diff --git a/apps/web-new/app/components/mdx/MdxPage.tsx b/apps/web-new/app/components/mdx/MdxPage.tsx
index f22b8f9b..b30f3f69 100644
--- a/apps/web-new/app/components/mdx/MdxPage.tsx
+++ b/apps/web-new/app/components/mdx/MdxPage.tsx
@@ -10,11 +10,10 @@ import {
   TypographyStylesProvider,
 } from "@mantine/core";
 import { useWindowScroll } from "@mantine/hooks";
-import { MDXProvider } from "@mdx-js/react";
 import { IconArrowUp } from "@tabler/icons-react";
-import { useMDXComponents } from "mdx-components";
 import { ReactNode } from "react";
 import { TableOfContentsNav } from "~/components/mdx/TableOfContents/TableOfContents";
+import { MdxProvider } from "./MdxProvider";
 
 interface MdxPageProps {
   title: string;
@@ -45,9 +44,7 @@ export function MdxPage({
         <Divider my="lg" />
         <div id="mdx">
           <TypographyStylesProvider>
-            <MDXProvider components={useMDXComponents({})}>
-              {children}
-            </MDXProvider>
+            <MdxProvider>{children}</MdxProvider>
           </TypographyStylesProvider>
         </div>
         <Affix position={{ bottom: 20, right: 20 }}>
diff --git a/apps/web-new/mdx-components.tsx b/apps/web-new/mdx-components.tsx
deleted file mode 100644
index f285d915..00000000
--- a/apps/web-new/mdx-components.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { BlockQuote } from "./app/components/mdx/BlockQuote/BlockQuote";
-import { CodeBlock } from "./app/components/mdx/CodeBlock/CodeBlock";
-import { CodeHighlightBlock } from "./app/components/mdx/CodeHighlight/CodeHighlight";
-
-export function useMDXComponents(components: any) {
-  return {
-    ...components,
-    code: CodeBlock,
-    blockquote: BlockQuote,
-    pre: CodeHighlightBlock,
-  };
-}