diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
index d662d1582..3ea6f986a 100644
--- a/apps/docs/app/layout.tsx
+++ b/apps/docs/app/layout.tsx
@@ -13,7 +13,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 {RandomBanner} from "@/components/random-banner";
 
 export const metadata: Metadata = {
   title: {
@@ -83,7 +83,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 />
+            <RandomBanner />
             <Navbar mobileRoutes={manifest.mobileRoutes} routes={manifest.routes} />
             {children}
             <Analytics mode="production" />
diff --git a/apps/docs/components/random-banner.tsx b/apps/docs/components/random-banner.tsx
new file mode 100644
index 000000000..7b5195d40
--- /dev/null
+++ b/apps/docs/components/random-banner.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import {useState, useEffect} from "react";
+
+import {HeroUIChatBanner} from "@/components/heroui-chat-banner";
+import {ProBanner} from "@/components/pro-banner";
+
+export const RandomBanner = () => {
+  const [showChatBanner, setShowChatBanner] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    const bannerCount = parseInt(sessionStorage.getItem("bannerCount") || "0", 10);
+
+    const shouldShowChat = bannerCount % 2 === 0;
+
+    setShowChatBanner(shouldShowChat);
+
+    sessionStorage.setItem("bannerCount", String(bannerCount + 1));
+  }, []);
+
+  if (showChatBanner === null) {
+    return <div className="h-[47px] sm:h-[46px] border-b border-divider" />;
+  }
+
+  return showChatBanner ? <HeroUIChatBanner /> : <ProBanner />;
+};