diff --git a/CHANGELOG.md b/CHANGELOG.md
index 52abb88dc..04cecf005 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ You can also check the [release page](https://github.com/visualize-admin/visuali
 
 - Performance
   - The debug data is now only sent along with the payload when the debug mode is enabled
+  - ContentMDXProvider is now only imported within the pages that actually need it instead of being included in the root of the app
 
 # [3.20.1] - 2023-06-19
 
diff --git a/app/components/content-mdx-provider.tsx b/app/components/content-mdx-provider.tsx
index 7d1136de0..3e8997dd1 100644
--- a/app/components/content-mdx-provider.tsx
+++ b/app/components/content-mdx-provider.tsx
@@ -3,7 +3,7 @@ import { Box } from "@mui/material";
 import { ReactNode } from "react";
 
 import { ContentLayout, StaticContentLayout } from "@/components/layout";
-import { Intro, Tutorial, Examples, Contribute } from "@/homepage";
+import { Contribute, Examples, Intro, Tutorial } from "@/homepage";
 
 const castContentId = (contentId: unknown) => {
   if (typeof contentId === "string") {
@@ -30,7 +30,6 @@ const Wrapper = ({
 
 const defaultMDXComponents = {
   wrapper: Wrapper,
-  // p: (props: $FixMe) => <p {...props} style={{ color: "red" }} />,
   Box,
   Intro,
   Tutorial,
diff --git a/app/homepage/intro.tsx b/app/homepage/intro.tsx
index c13001012..bff30f0cb 100644
--- a/app/homepage/intro.tsx
+++ b/app/homepage/intro.tsx
@@ -1,6 +1,6 @@
 import { Box, Button, Typography } from "@mui/material";
 import NextLink from "next/link";
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 
 import { HintRed } from "@/components/hint";
 
@@ -75,6 +75,7 @@ export const Title = ({ children }: { children: ReactNode }) => (
     {children}
   </Typography>
 );
+
 export const Teaser = ({ children }: { children: ReactNode }) => (
   <Box sx={{ mb: [6, 5] }}>
     <Typography
diff --git a/app/pages/[slug].tsx b/app/pages/[slug].tsx
index 26c053dc6..93fc1bf85 100644
--- a/app/pages/[slug].tsx
+++ b/app/pages/[slug].tsx
@@ -1,5 +1,6 @@
 import { GetStaticPaths, GetStaticProps } from "next";
 
+import { ContentMDXProvider } from "@/components/content-mdx-provider";
 import { staticPages } from "@/static-pages";
 
 /**
@@ -18,7 +19,11 @@ interface ContentPageProps {
 export default function ContentPage({ staticPage }: ContentPageProps) {
   const Component = staticPages[staticPage]?.component;
 
-  return Component ? <Component /> : "NOT FOUND";
+  return (
+    <ContentMDXProvider>
+      {Component ? <Component /> : "NOT FOUND"}
+    </ContentMDXProvider>
+  );
 }
 
 export const getStaticPaths: GetStaticPaths = async () => {
diff --git a/app/pages/_app.tsx b/app/pages/_app.tsx
index 0d140ce32..0c877b157 100644
--- a/app/pages/_app.tsx
+++ b/app/pages/_app.tsx
@@ -1,25 +1,24 @@
 import { I18nProvider } from "@lingui/react";
 // Used for color-picker component. Must include here because of next.js constraints about global CSS imports
-import "core-js/features/array/flat-map";
 import { CssBaseline, ThemeProvider } from "@mui/material";
+import "core-js/features/array/flat-map";
 import { SessionProvider } from "next-auth/react";
 import { AppProps } from "next/app";
 import Head from "next/head";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { ContentMDXProvider } from "@/components/content-mdx-provider";
 import { PUBLIC_URL } from "@/domain/env";
 import { flag } from "@/flags/flag";
 import DebugPanel from "@/gql-flamegraph/devtool";
 import { GraphqlProvider } from "@/graphql/GraphqlProvider";
-import "@/utils/nprogress.css";
 import { i18n, parseLocaleString } from "@/locales/locales";
 import { LocaleProvider } from "@/locales/use-locale";
 import * as federalTheme from "@/themes/federal";
 import Flashes from "@/utils/flashes";
 import { analyticsPageView } from "@/utils/googleAnalytics";
 import AsyncLocalizationProvider from "@/utils/l10n-provider";
+import "@/utils/nprogress.css";
 import { useNProgress } from "@/utils/use-nprogress";
 
 export default function App({
@@ -88,11 +87,9 @@ export default function App({
                 <CssBaseline />
                 <Flashes />
                 {shouldShowDebug ? <DebugPanel /> : null}
-                <ContentMDXProvider>
-                  <AsyncLocalizationProvider locale={locale}>
-                    <Component {...pageProps} />
-                  </AsyncLocalizationProvider>
-                </ContentMDXProvider>
+                <AsyncLocalizationProvider locale={locale}>
+                  <Component {...pageProps} />
+                </AsyncLocalizationProvider>
               </ThemeProvider>
             </GraphqlProvider>
           </I18nProvider>
diff --git a/app/pages/index.tsx b/app/pages/index.tsx
index b403f16f6..252fbbb99 100644
--- a/app/pages/index.tsx
+++ b/app/pages/index.tsx
@@ -1,5 +1,6 @@
 import { GetStaticProps } from "next";
 
+import { ContentMDXProvider } from "@/components/content-mdx-provider";
 import { staticPages } from "@/static-pages";
 
 /**
@@ -18,7 +19,11 @@ interface ContentPageProps {
 export default function ContentPage({ staticPage }: ContentPageProps) {
   const Component = staticPages[staticPage]?.component;
 
-  return Component ? <Component /> : "NOT FOUND";
+  return (
+    <ContentMDXProvider>
+      {Component ? <Component /> : "NOT FOUND"}
+    </ContentMDXProvider>
+  );
 }
 
 export const getStaticProps: GetStaticProps<ContentPageProps> = async ({