diff --git a/apps/developer-hub/src/components/Footer/index.tsx b/apps/developer-hub/src/components/Footer/index.tsx
new file mode 100644
index 0000000000..2a1743b1d5
--- /dev/null
+++ b/apps/developer-hub/src/components/Footer/index.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { OverlayVisibleContext } from "@pythnetwork/component-library/overlay-visible-context";
+import { AlertProvider } from "@pythnetwork/component-library/useAlert";
+import { DrawerProvider } from "@pythnetwork/component-library/useDrawer";
+import type { CSSProperties, ReactNode } from "react";
+import { useState } from "react";
+
+type Props = {
+  children: ReactNode;
+};
+
+export function FooterProviders({ children }: Props) {
+  const overlayState = useState(false);
+  const [offset, setOffset] = useState(0);
+
+  return (
+    <OverlayVisibleContext value={overlayState}>
+      <AlertProvider>
+        <DrawerProvider setMainContentOffset={setOffset}>
+          <div
+            style={{ "--offset": offset / 100 } as CSSProperties}
+            data-overlay-visible={overlayState[0] ? "" : undefined}
+          >
+            {children}
+          </div>
+        </DrawerProvider>
+      </AlertProvider>
+    </OverlayVisibleContext>
+  );
+}
diff --git a/apps/developer-hub/src/components/Root/index.tsx b/apps/developer-hub/src/components/Root/index.tsx
index e723ce9fd8..7eecbb5f0a 100644
--- a/apps/developer-hub/src/components/Root/index.tsx
+++ b/apps/developer-hub/src/components/Root/index.tsx
@@ -1,8 +1,11 @@
 import { RootProviders } from "@pythnetwork/component-library/AppShell";
+import { Footer as PythNetworkFooter } from "@pythnetwork/component-library/Footer";
 import { NuqsAdapter } from "@pythnetwork/react-hooks/nuqs-adapters-next";
 import { RootProvider as FumadocsRootProvider } from "fumadocs-ui/provider";
 import type { ReactNode } from "react";
 
+import { FooterProviders } from "../Footer";
+
 import "./global.css";
 
 export const TABS = [
@@ -20,28 +23,31 @@ export const Root = ({ children }: Props) => (
   <html lang="en">
     <body>
       <RootProviders providers={[NuqsAdapter]}>
-        <FumadocsRootProvider
-          search={{
-            enabled: true,
-            options: {
-              api: "/api/search",
-            },
+        <FooterProviders>
+          <FumadocsRootProvider
+            search={{
+              enabled: true,
+              options: {
+                api: "/api/search",
+              },
+            }}
+          >
+            {/* commenting out the app body because we don't have the app shell anymore
+            <AppBody
+          appName="Developer Hub"
+          displaySupportButton={false}
+          extraCta={<SearchButton />}
+          mainCta={{
+            label: "Developer Forum",
+            href: "https://dev-forum.pyth.network/",
           }}
-        >
-          {/* commenting out the app body because we don't have the app shell anymore
-          <AppBody
-        appName="Developer Hub"
-        displaySupportButton={false}
-        extraCta={<SearchButton />}
-        mainCta={{
-          label: "Developer Forum",
-          href: "https://dev-forum.pyth.network/",
-        }}
-        tabs={TABS}
-      > */}
-          {children}
-          {/* </AppBody> */}
-        </FumadocsRootProvider>
+          tabs={TABS}
+        > */}
+            {children}
+            <PythNetworkFooter />
+            {/* </AppBody> */}
+          </FumadocsRootProvider>
+        </FooterProviders>
       </RootProviders>
     </body>
   </html>
