diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
index c90ee397d..8744b9236 100644
--- a/apps/docs/app/layout.tsx
+++ b/apps/docs/app/layout.tsx
@@ -12,7 +12,7 @@ import {siteConfig} from "@/config/site";
 import {fonts} from "@/config/fonts";
 import {Navbar} from "@/components/navbar";
 import {Footer} from "@/components/footer";
-import {HeroUIChatBanner} from "@/components/heroui-chat-banner";
+import {HeroUIProCallout} from "@/components/docs/heroui-pro-callout";
 
 export const metadata: Metadata = {
   title: {
@@ -82,7 +82,7 @@ export default function RootLayout({children}: {children: React.ReactNode}) {
       >
         <Providers themeProps={{attribute: "class", defaultTheme: "dark"}}>
           <div className="relative flex flex-col" id="app-container">
-            <HeroUIChatBanner />
+            <HeroUIProCallout />
             <Navbar mobileRoutes={manifest.mobileRoutes} routes={manifest.routes} />
             {children}
             <Analytics mode="production" />