diff --git a/apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx b/apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx
index 3948ae4db1fa84..a64e92ecf17530 100644
--- a/apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx
+++ b/apps/public-docsite/src/SiteDefinition/SiteDefinition.tsx
@@ -62,21 +62,7 @@ export const SiteDefinition: ISiteDefinition<Platforms> = {
     { from: '#/styles/web/fluent-theme', to: '#/controls/web/themes' },
     { from: '#/examples', to: '#/controls/web' },
   ],
-  messageBars: [
-    {
-      path: '#',
-      text: (
-        <span>
-          🎉 Announcing Fluent UI React v9 stable release! Visit{' '}
-          <a href="https://react.fluentui.dev/" style={{ color: '#006cbe' }}>
-            Fluent UI React v9
-          </a>{' '}
-          to see more.
-        </span>
-      ),
-      sessionStoragePrefix: 'FluentUI9',
-    },
-  ],
+  messageBars: [],
   // This is defined by loadSite() from @fluentui/public-docsite-setup
   versionSwitcherDefinition: window.__versionSwitcherDefinition,
 };
diff --git a/apps/public-docsite/src/pages/Controls/ControlsAreaPage.tsx b/apps/public-docsite/src/pages/Controls/ControlsAreaPage.tsx
index 25528c11ca408b..a75cc53f520ce0 100644
--- a/apps/public-docsite/src/pages/Controls/ControlsAreaPage.tsx
+++ b/apps/public-docsite/src/pages/Controls/ControlsAreaPage.tsx
@@ -9,6 +9,13 @@ export interface IControlsPageProps extends IPageProps<Platforms> {}
 
 const apiRequireContext = require.context('@fluentui/public-docsite-resources/dist/api/', true, /^(?!references).*/);
 
+const webPlatformBanner = {
+  banner: {
+    title: 'Fluent UI v9',
+    message: 'Check out the all new [Fluent UI version 9](https://react.fluentui.dev)!',
+  },
+};
+
 const ControlsAreaPageBase: React.FunctionComponent<IControlsPageProps> = props => {
   let jsonDocs: IPageJson;
   if (props.platform === 'web' && !props.jsonDocs) {
@@ -25,6 +32,7 @@ const ControlsAreaPageBase: React.FunctionComponent<IControlsPageProps> = props
       subTitle={getSubTitle(props.platform!)}
       jsonDocs={jsonDocs!}
       {...props}
+      {...(props.platform === Platforms.web && webPlatformBanner)}
       versionSwitcherDefinition={
         props.platform === Platforms.web ? SiteDefinition.versionSwitcherDefinition : undefined
       }
diff --git a/change/@fluentui-react-docsite-components-55a098aa-b0e5-41f6-9724-d7b9f4d1ba94.json b/change/@fluentui-react-docsite-components-55a098aa-b0e5-41f6-9724-d7b9f4d1ba94.json
new file mode 100644
index 00000000000000..d4ad324c9d2b85
--- /dev/null
+++ b/change/@fluentui-react-docsite-components-55a098aa-b0e5-41f6-9724-d7b9f4d1ba94.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Add link to reference v9 website next to v8's version selector.",
+  "packageName": "@fluentui/react-docsite-components",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-docsite-components/src/components/Page/Page.module.scss b/packages/react-docsite-components/src/components/Page/Page.module.scss
index 0a2ff3f515d42d..9a94c2f4f4b3f3 100644
--- a/packages/react-docsite-components/src/components/Page/Page.module.scss
+++ b/packages/react-docsite-components/src/components/Page/Page.module.scss
@@ -13,6 +13,26 @@ $usageListPadding: 24px;
   max-width: $content-width + ($App-padding-sm * 2);
 }
 
+.banner {
+  background-image: linear-gradient(
+    to right bottom,
+    #c989e8,
+    #cea1f0,
+    #d6b8f7,
+    #dfcefb,
+    #ebe3fe,
+    #ece9ff,
+    #efeeff,
+    #f2f3ff,
+    #e6eaff,
+    #d7e2ff,
+    #c6dbff,
+    #b3d4ff
+  ) !important;
+  padding-top: 10px !important;
+  padding-bottom: 10px !important;
+}
+
 .section {
   background: $ms-color-white;
   padding: $App-padding-sm;
diff --git a/packages/react-docsite-components/src/components/Page/Page.tsx b/packages/react-docsite-components/src/components/Page/Page.tsx
index 5a64c077b85c2b..456260318c0144 100644
--- a/packages/react-docsite-components/src/components/Page/Page.tsx
+++ b/packages/react-docsite-components/src/components/Page/Page.tsx
@@ -21,6 +21,7 @@ import { IPageProps, IPageSectionProps } from './Page.types';
 import * as styles from './Page.module.scss';
 import { sideRailWidth } from '../../styles/constants';
 import { getLinkColors } from '../../utilities/getLinkColors';
+import { BannerSection } from './sections/BannerSection';
 
 const SECTION_STAGGER_INTERVAL = 0.05;
 /** Section key/id prefix for sections which don't have a title */
@@ -148,6 +149,7 @@ export class Page extends React.Component<IPageProps, IPageState> {
       title,
       usage,
       accessibility,
+      banner,
     } = this.props;
 
     const sectionProps: IPageSectionProps = {
@@ -159,6 +161,14 @@ export class Page extends React.Component<IPageProps, IPageState> {
 
     const sections: IPageSectionProps[] = [];
 
+    banner &&
+      sections.push({
+        renderAs: BannerSection,
+        ...sectionProps,
+        content: banner.message,
+        sectionName: banner.title,
+      });
+
     overview &&
       sections.push({ renderAs: OverviewSection, ...sectionProps, sectionName: 'Overview', content: overview });
 
diff --git a/packages/react-docsite-components/src/components/Page/Page.types.ts b/packages/react-docsite-components/src/components/Page/Page.types.ts
index a27c5ffe839d52..61b32fbf852e4c 100644
--- a/packages/react-docsite-components/src/components/Page/Page.types.ts
+++ b/packages/react-docsite-components/src/components/Page/Page.types.ts
@@ -31,6 +31,8 @@ export interface IPageProps<TPlatforms extends string = string> {
   /** Optional title of the file to be passed to edit URL if different than the page title. */
   fileNamePrefix?: string;
 
+  banner?: IBanner;
+
   /** (1) Overview of the page as Markdown string */
   overview?: string;
 
@@ -125,6 +127,11 @@ export interface IExample extends IExampleCardProps {
   view: React.ReactNode;
 }
 
+export interface IBanner {
+  title?: string;
+  message?: string;
+}
+
 export interface IPageSectionProps<TPlatforms extends string = string>
   extends Pick<IPageProps<TPlatforms>, 'title' | 'componentUrl' | 'fileNamePrefix' | 'platform'> {
   /** ID for the section (auto-generated if not specified) */
diff --git a/packages/react-docsite-components/src/components/Page/sections/BannerSection.tsx b/packages/react-docsite-components/src/components/Page/sections/BannerSection.tsx
new file mode 100644
index 00000000000000..fa1f8ccf4961e1
--- /dev/null
+++ b/packages/react-docsite-components/src/components/Page/sections/BannerSection.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import * as styles from '../Page.module.scss';
+import { css, hiddenContentStyle } from '@fluentui/react';
+import { IBanner, IPageSectionPropsWithSectionName } from '../Page.types';
+import { Markdown } from '../../Markdown/index';
+
+export const BannerSection: React.FunctionComponent<IPageSectionPropsWithSectionName & IBanner> = props => {
+  const { className, title = props.sectionName, content, style, id } = props;
+  return (
+    <div className={css(styles.banner, className)} style={style}>
+      <div id={id} tabIndex={-1}>
+        {/* This heading isn't shown but must be programmatically focusable for simulating jumping to an anchor */}
+        <h2 className={styles.subHeading} style={hiddenContentStyle as React.CSSProperties}>
+          <Markdown>{title}</Markdown>
+        </h2>
+      </div>
+      <div className={styles.content}>
+        <Markdown>{content}</Markdown>
+      </div>
+    </div>
+  );
+};