diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index 09ce6b1d..4a56c908 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -17,7 +17,8 @@ import {
   CAREERS_URL,
   WEBSITE_PRIVACY_URL,
   EXTENSION_PRIVACY_URL,
-  GITHUB_REPO_URL
+  GITHUB_REPO_URL,
+  TEAMS_PROMO_URL
 } from './src/constants';
 
 // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
@@ -292,6 +293,13 @@ const config: Config = {
       {property: 'og:type', content: 'website'},
       {property: 'og:locale', content: 'en_US'},
     ],
+    announcementBar: {
+      id: 'teams-early-access-2025-09-2',
+      content: `Ship Faster with Roo Code Teams. <a href="${TEAMS_PROMO_URL}" target="_blank" rel="noopener noreferrer">Get early access now.</a>`,
+      backgroundColor: 'var(--roo-announcement-bar-bg)',
+      textColor: '#ffffff',
+      isCloseable: true,
+    },
     colorMode: {
       defaultMode: 'dark',
       disableSwitch: false,
diff --git a/src/constants.ts b/src/constants.ts
index a6d0cdff..851aef63 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -28,4 +28,7 @@ export const OPEN_VSX_URL = 'https://open-vsx.org/extension/RooVeterinaryInc/roo
 export const CONTACT_EMAIL = 'mailto:support@roocode.com';
 export const CAREERS_URL = 'https://careers.roocode.com';
 export const WEBSITE_PRIVACY_URL = 'https://roocode.com/privacy';
-export const EXTENSION_PRIVACY_URL = `${GITHUB_MAIN_REPO_URL}/blob/main/PRIVACY.md`;
\ No newline at end of file
+export const EXTENSION_PRIVACY_URL = `${GITHUB_MAIN_REPO_URL}/blob/main/PRIVACY.md`;
+
+// Marketing / promo links
+export const TEAMS_PROMO_URL = 'https://app.roocode.com/l/teams?utm_source=docs&utm_medium=banner&utm_campaign=teams_promo';
\ No newline at end of file
diff --git a/src/css/custom.css b/src/css/custom.css
index dea34ea1..70fb18a2 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -6,6 +6,7 @@
 
 /* Light mode color system */
 :root {
+  --roo-announcement-bar-bg: #375497;
   --background: 0 0% 100%;
   --foreground: 0 0% 3.9%;
   --card: 0 0% 100%;
@@ -2332,4 +2333,22 @@ html {
 /* Ensure consistent spacing for all tutorial video links */
 .menu__list-item:has(> a[href^="https://www.youtube.com/watch"]) {
   margin-bottom: 0 !important;
+}
+/* Announcement bar close "X" color override: ensure the close icon is white on all themes */
+.theme-announcement-bar [aria-label="Close"] {
+  color: #ffffff !important; /* Icon inherits currentColor */
+  opacity: 1 !important;
+}
+
+.theme-announcement-bar [aria-label="Close"] svg,
+.theme-announcement-bar [aria-label="Close"] path,
+.theme-announcement-bar [aria-label="Close"] g {
+  color: #ffffff !important;
+  fill: #ffffff !important;
+  stroke: #ffffff !important;
+}
+
+.theme-announcement-bar [aria-label="Close"]:hover {
+  color: #ffffff !important;
+  opacity: 1 !important;
 }
\ No newline at end of file
diff --git a/src/theme/DocBreadcrumbs/index.tsx b/src/theme/DocBreadcrumbs/index.tsx
index 5382245d..8f14abf4 100644
--- a/src/theme/DocBreadcrumbs/index.tsx
+++ b/src/theme/DocBreadcrumbs/index.tsx
@@ -60,6 +60,7 @@ export default function DocBreadcrumbs(): ReactNode {
     return null;
   }
 
+
   return (
     <>
       <DocBreadcrumbsStructuredData breadcrumbs={breadcrumbs} />
diff --git a/src/theme/DocBreadcrumbs/styles.module.css b/src/theme/DocBreadcrumbs/styles.module.css
index 77a4bdfe..bd5fbda0 100644
--- a/src/theme/DocBreadcrumbs/styles.module.css
+++ b/src/theme/DocBreadcrumbs/styles.module.css
@@ -14,3 +14,8 @@
   margin: 0;
   flex: 1;
 }
+
+
+
+
+