diff --git a/app/routes.res b/app/routes.res
index 6f5b9b8fc..e5e40d31f 100644
--- a/app/routes.res
+++ b/app/routes.res
@@ -49,6 +49,7 @@ let default = [
   route("blog", "./routes/BlogRoute.jsx", ~options={id: "blog-index"}),
   route("blog/archived", "./routes/BlogRoute.jsx", ~options={id: "blog-archived"}),
   route("docs", "./routes/DocsOverview.jsx", ~options={id: "docs-overview"}),
+  route("docs/manual/api", "./routes/ApiOverviewRoute.jsx", ~options={id: "api-overview"}),
   route("docs/manual/api/stdlib", "./routes/ApiRoute.jsx", ~options={id: "api-stdlib"}),
   route("docs/manual/api/introduction", "./routes/ApiRoute.jsx", ~options={id: "api-intro"}),
   route("docs/manual/api/belt", "./routes/ApiRoute.jsx", ~options={id: "api-belt"}),
diff --git a/app/routes/ApiOverviewRoute.res b/app/routes/ApiOverviewRoute.res
new file mode 100644
index 000000000..6f99da626
--- /dev/null
+++ b/app/routes/ApiOverviewRoute.res
@@ -0,0 +1,84 @@
+type loaderData = {
+  compiledMdx: CompiledMdx.t,
+  title: string,
+  description: string,
+}
+
+let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
+  let {pathname} = WebAPI.URL.make(~url=request.url)
+  let filePath = MdxFile.resolveFilePath(
+    (pathname :> string),
+    ~dir="markdown-pages/docs/manual",
+    ~alias="docs/manual",
+  )
+
+  let raw = await Node.Fs.readFile(filePath, "utf-8")
+  let {frontmatter}: MarkdownParser.result = MarkdownParser.parseSync(raw)
+
+  let description = switch frontmatter {
+  | Object(dict) =>
+    switch dict->Dict.get("description") {
+    | Some(String(s)) => s
+    | _ => ""
+    }
+  | _ => ""
+  }
+
+  let compiledMdx = await MdxFile.compileMdx(raw, ~filePath, ~remarkPlugins=Mdx.plugins)
+
+  {
+    compiledMdx,
+    title: "API | ReScript API",
+    description,
+  }
+}
+
+let default = () => {
+  let {pathname} = ReactRouter.useLocation()
+  let {compiledMdx, title, description} = ReactRouter.useLoaderData()
+
+  let breadcrumbs = list{
+    {Url.name: "Docs", href: `/docs/manual/api`},
+    {Url.name: "API", href: `/docs/manual/api`},
+  }
+
+  let sidebarContent =
+    <aside className="px-4 w-full block">
+      <div className="flex justify-between items-baseline">
+        <div className="flex flex-col text-fire font-medium">
+          <VersionSelect />
+        </div>
+        <button
+          className="flex items-center" onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
+        >
+          <Icon.Close />
+        </button>
+      </div>
+      <div className="mb-56">
+        {ApiOverviewLayout.categories
+        ->Array.map(category => {
+          let isItemActive = (navItem: SidebarLayout.Sidebar.NavItem.t) =>
+            navItem.href === (pathname :> string)
+          <div key=category.name>
+            <SidebarLayout.Sidebar.Category
+              isItemActive category onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
+            />
+          </div>
+        })
+        ->React.array}
+      </div>
+    </aside>
+
+  <>
+    <Meta title description />
+    <NavbarSecondary />
+    <NavbarTertiary sidebar=sidebarContent>
+      <SidebarLayout.BreadCrumbs crumbs=breadcrumbs />
+    </NavbarTertiary>
+    <ApiOverviewLayout.Docs>
+      <div className="markdown-body">
+        <MdxContent compiledMdx />
+      </div>
+    </ApiOverviewLayout.Docs>
+  </>
+}
diff --git a/app/routes/MdxRoute.res b/app/routes/MdxRoute.res
index f61e9db29..aebf7e37d 100644
--- a/app/routes/MdxRoute.res
+++ b/app/routes/MdxRoute.res
@@ -159,9 +159,7 @@ let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
     res
   } else {
     let categories = {
-      if pathname == "/docs/manual/api" {
-        []
-      } else if pathname->String.includes("docs/manual") {
+      if pathname->String.includes("docs/manual") {
         await manualTableOfContents()
       } else if pathname->String.includes("docs/react") {
         await reactTableOfContents()
@@ -236,8 +234,6 @@ let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
       let path = (pathname :> string)
       let title = if path->String.includes("docs/react") {
         "ReScript React"
-      } else if path->String.includes("docs/manual/api") {
-        "ReScript API"
       } else if path->String.includes("docs/manual") {
         "ReScript Language Manual"
       } else if path->String.includes("community") {
@@ -249,11 +245,7 @@ let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
       title
     }
 
-    let title = if pathname == "/docs/manual/api" {
-      "API"
-    } else {
-      mdx.attributes.title
-    }
+    let title = mdx.attributes.title
 
     let res: loaderData = {
       __raw: mdx.__raw,
@@ -278,49 +270,7 @@ let default = () => {
   let {entries, categories, title} = loaderData
 
   <>
-    {if (pathname :> string) == "/docs/manual/api" {
-      let breadcrumbs = list{
-        {Url.name: "Docs", href: `/docs/manual/api`},
-        {name: "API", href: `/docs/manual/api`},
-      }
-      let sidebarContent =
-        <aside className="px-4 w-full block">
-          <div className="flex justify-between items-baseline">
-            <div className="flex flex-col text-fire font-medium">
-              <VersionSelect />
-            </div>
-            <button
-              className="flex items-center" onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
-            >
-              <Icon.Close />
-            </button>
-          </div>
-          <div className="mb-56">
-            {ApiOverviewLayout.categories
-            ->Array.map(category => {
-              let isItemActive = (navItem: SidebarLayout.Sidebar.NavItem.t) =>
-                navItem.href === (pathname :> string)
-              <div key=category.name>
-                <SidebarLayout.Sidebar.Category
-                  isItemActive category onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
-                />
-              </div>
-            })
-            ->React.array}
-          </div>
-        </aside>
-
-      <>
-        <Meta title=title description={attributes.description->Nullable.getOr("ReScript API")} />
-        <NavbarSecondary />
-        <NavbarTertiary sidebar=sidebarContent>
-          <SidebarLayout.BreadCrumbs crumbs=breadcrumbs />
-        </NavbarTertiary>
-        <ApiOverviewLayout.Docs>
-          <div className="markdown-body"> {component()} </div>
-        </ApiOverviewLayout.Docs>
-      </>
-    } else if (
+    {if (
       (pathname :> string)->String.includes("docs/manual") ||
       (pathname :> string)->String.includes("docs/react") ||
       (pathname :> string)->String.includes("docs/guidelines")