diff --git a/website/developer-docs/api/browser.mdx b/website/developer-docs/api/browser.mdx
new file mode 100644
index 000000000..7aa35b209
--- /dev/null
+++ b/website/developer-docs/api/browser.mdx
@@ -0,0 +1,38 @@
+# API Browser
+
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import BrowserOnly from "@docusaurus/core/lib/client/exports/BrowserOnly";
+import { useColorMode } from "@docusaurus/theme-common";
+
+export function APIBrowser() {
+    const context = useDocusaurusContext();
+    const { siteConfig = {} } = context;
+    const { colorMode, setColorMode } = useColorMode();
+    let bg = "#1b1b1d";
+    if (colorMode === "light") {
+        bg = "#fff";
+    }
+    return (
+        <BrowserOnly>
+            {() => {
+                import("rapidoc");
+                return (
+                    <rapi-doc
+                        spec-url={useBaseUrl("schema.yaml")}
+                        allow-try="false"
+                        show-header="false"
+                        theme={colorMode}
+                        bg-color={bg}
+                        render-style="view"
+                        primary-color="#fd4b2d"
+                        allow-spec-url-load="false"
+                        allow-spec-file-load="false"
+                    ></rapi-doc>
+                );
+            }}
+        </BrowserOnly>
+    );
+}
+
+<APIBrowser />
diff --git a/website/sidebarsDev.js b/website/sidebarsDev.js
index 2275e0cb7..79524a97f 100644
--- a/website/sidebarsDev.js
+++ b/website/sidebarsDev.js
@@ -30,6 +30,7 @@ module.exports = {
                 "api/flow-executor",
                 "api/making-schema-changes",
                 "api/websocket",
+                "api/browser",
             ],
         },
         {
diff --git a/website/src/pages/api.jsx b/website/src/pages/api.jsx
deleted file mode 100644
index b95e942e8..000000000
--- a/website/src/pages/api.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-import Layout from "@theme/Layout";
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import useBaseUrl from "@docusaurus/useBaseUrl";
-import BrowserOnly from "@docusaurus/core/lib/client/exports/BrowserOnly";
-
-function APIBrowser() {
-    const context = useDocusaurusContext();
-    const { siteConfig = {} } = context;
-    return (
-        <Layout title="API Browser" description={siteConfig.tagline}>
-            <BrowserOnly>
-                {() => {
-                    import("rapidoc");
-                    return (
-                        <rapi-doc
-                            spec-url={useBaseUrl("schema.yaml")}
-                            allow-try="false"
-                            show-header="false"
-                            theme="dark"
-                            render-style="view"
-                            primary-color="#fd4b2d"
-                            allow-spec-url-load="false"
-                            allow-spec-file-load="false"
-                        ></rapi-doc>
-                    );
-                }}
-            </BrowserOnly>
-        </Layout>
-    );
-}
-
-export default APIBrowser;