diff --git a/packages/eui-theme-borealis/changelogs/upcoming/9049.md b/packages/eui-theme-borealis/changelogs/upcoming/9049.md
new file mode 100644
index 00000000000..b09d56d59ec
--- /dev/null
+++ b/packages/eui-theme-borealis/changelogs/upcoming/9049.md
@@ -0,0 +1 @@
+- Added `tabsSize` theme override to size `m` for `EuiPageHeader`
\ No newline at end of file
diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts
index 481213da075..c7b242fbae9 100644
--- a/packages/eui-theme-borealis/src/variables/_components.ts
+++ b/packages/eui-theme-borealis/src/variables/_components.ts
@@ -21,6 +21,7 @@ import { border_colors } from './colors/_colors_light';
 import { buttons } from './_buttons';
 import { forms } from './_forms';
 import { emptyPrompt } from './_empty_prompt';
+import { pageHeader } from './_page_header';
 
 const component_colors: _EuiThemeComponentColors = {
   badgeBackground: computed(
@@ -372,6 +373,7 @@ export const components: _EuiThemeComponents = {
   buttons,
   forms,
   emptyPrompt,
+  pageHeader,
   LIGHT: component_colors,
   DARK: {
     ...component_colors,
diff --git a/packages/eui-theme-borealis/src/variables/_page_header.ts b/packages/eui-theme-borealis/src/variables/_page_header.ts
new file mode 100644
index 00000000000..be5d8e0a7a3
--- /dev/null
+++ b/packages/eui-theme-borealis/src/variables/_page_header.ts
@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { _EuiThemePageHeader } from '@elastic/eui-theme-common';
+
+export const pageHeader: _EuiThemePageHeader = {
+  tabsSize: 'm', // Reduced from default 'l'
+};
diff --git a/packages/eui-theme-common/changelogs/upcoming/9049.md b/packages/eui-theme-common/changelogs/upcoming/9049.md
new file mode 100644
index 00000000000..5e286d5ec2c
--- /dev/null
+++ b/packages/eui-theme-common/changelogs/upcoming/9049.md
@@ -0,0 +1 @@
+- Added `_EuiThemePageHeader` type and `pageHeader` component token
\ No newline at end of file
diff --git a/packages/eui-theme-common/src/global_styling/variables/components.ts b/packages/eui-theme-common/src/global_styling/variables/components.ts
index fb33a1ef7c0..b748680dc91 100644
--- a/packages/eui-theme-common/src/global_styling/variables/components.ts
+++ b/packages/eui-theme-common/src/global_styling/variables/components.ts
@@ -13,6 +13,7 @@ import {
 import { _EuiThemeButton } from './buttons';
 import { _EuiThemeForm, _EuiThemeFormColors } from './forms';
 import { _EuiThemeEmptyPrompt } from './empty_prompt';
+import { _EuiThemePageHeader } from './page_header';
 
 export type _EuiThemeComponentColors = {
   badgeBackground: ColorModeSwitch;
@@ -159,6 +160,7 @@ export type _EuiThemeComponents = {
   buttons: _EuiThemeButton;
   forms: _EuiThemeForm & StrictColorModeSwitch<_EuiThemeFormColors>;
   emptyPrompt: _EuiThemeEmptyPrompt;
+  pageHeader: _EuiThemePageHeader;
   /**
    * internal-only key that holds temporary tokens used while migrating themes
    */
diff --git a/packages/eui-theme-common/src/global_styling/variables/index.ts b/packages/eui-theme-common/src/global_styling/variables/index.ts
index abe9c691a1d..e0f9a922dcc 100644
--- a/packages/eui-theme-common/src/global_styling/variables/index.ts
+++ b/packages/eui-theme-common/src/global_styling/variables/index.ts
@@ -20,6 +20,7 @@ export * from './typography';
 export * from './buttons';
 export * from './forms';
 export * from './empty_prompt';
+export * from './page_header';
 export * from './components';
 export * from './flags';
 export * from './overrides';
diff --git a/packages/eui-theme-common/src/global_styling/variables/page_header.ts b/packages/eui-theme-common/src/global_styling/variables/page_header.ts
new file mode 100644
index 00000000000..7deded98e56
--- /dev/null
+++ b/packages/eui-theme-common/src/global_styling/variables/page_header.ts
@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export type _EuiThemePageHeader = {
+  tabsSize: string;
+};
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png
index 1b508df5f80..d3ca6b3f514 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png
index 0bd42a4326b..363d2d41862 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png
index 0bd42a4326b..363d2d41862 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png
index fb1d5e5808d..5fc8cd11491 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png
index b882bbd27f8..e2e041d64b1 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png
index e1b36fa9577..33bdb14c508 100644
Binary files a/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Templates_EuiPageTemplate_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png
index a466c63ff0e..e375b1dc663 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png
index 7cc0e460b34..4ff04be7f52 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_False.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png
index 99bd2a4ad15..3ef1763465d 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Responsive_Reverse.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png
index b8cffbcd5ba..74ac9457ec4 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeaderContent_Wrapping_Content.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png
index 93f68d095ca..7621357d70f 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Layout_EuiPage_EuiPageHeader_EuiPageHeader_Playground.png differ
diff --git a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png
index c9b88d77c87..a27d70136e0 100644
Binary files a/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Templates_EuiPageTemplate_Playground.png differ
diff --git a/packages/eui/changelogs/upcoming/9049.md b/packages/eui/changelogs/upcoming/9049.md
new file mode 100644
index 00000000000..9ef0e63bf03
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/9049.md
@@ -0,0 +1 @@
+- Changed `EuiPageHeader` tabs to `m` size for Borealis theme
\ No newline at end of file
diff --git a/packages/eui/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap b/packages/eui/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
index b65e738e5f3..949c18fb9a8 100644
--- a/packages/eui/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
+++ b/packages/eui/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
@@ -334,7 +334,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
       />
       <div
         aria-label="aria-label"
-        class="euiTabs testClass1 testClass2 emotion-euiTabs-l-euiTestCss"
+        class="euiTabs testClass1 testClass2 emotion-euiTabs-m-euiTestCss"
         data-test-subj="test subject string"
         role="tablist"
       >
@@ -346,7 +346,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
           type="button"
         >
           <span
-            class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
+            class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
           >
             Tab 1
           </span>
@@ -359,7 +359,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
           type="button"
         >
           <span
-            class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
+            class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
           >
             Tab 2
           </span>
diff --git a/packages/eui/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap b/packages/eui/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
index bb303c77089..367b21460e4 100644
--- a/packages/eui/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
+++ b/packages/eui/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
@@ -293,7 +293,7 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
       class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
     />
     <div
-      class="euiTabs emotion-euiTabs-l"
+      class="euiTabs emotion-euiTabs-m"
       role="tablist"
     >
       <button
@@ -304,7 +304,7 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
         type="button"
       >
         <span
-          class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
+          class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
         >
           Tab 1
         </span>
@@ -317,7 +317,7 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
         type="button"
       >
         <span
-          class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
+          class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
         >
           Tab 2
         </span>
@@ -552,7 +552,7 @@ exports[`EuiPageHeaderContent props tabs is rendered 1`] = `
         Tab 1
       </h1>
       <div
-        class="euiTabs emotion-euiTabs-l"
+        class="euiTabs emotion-euiTabs-m"
         role="tablist"
       >
         <button
@@ -563,7 +563,7 @@ exports[`EuiPageHeaderContent props tabs is rendered 1`] = `
           type="button"
         >
           <span
-            class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
+            class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
           >
             Tab 1
           </span>
@@ -576,7 +576,7 @@ exports[`EuiPageHeaderContent props tabs is rendered 1`] = `
           type="button"
         >
           <span
-            class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
+            class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
           >
             Tab 2
           </span>
@@ -604,7 +604,7 @@ exports[`EuiPageHeaderContent props tabs is rendered with tabsProps 1`] = `
       </h1>
       <div
         aria-label="aria-label"
-        class="euiTabs testClass1 testClass2 emotion-euiTabs-l-euiTestCss"
+        class="euiTabs testClass1 testClass2 emotion-euiTabs-m-euiTestCss"
         data-test-subj="test subject string"
         role="tablist"
       >
@@ -616,7 +616,7 @@ exports[`EuiPageHeaderContent props tabs is rendered with tabsProps 1`] = `
           type="button"
         >
           <span
-            class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
+            class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
           >
             Tab 1
           </span>
@@ -629,7 +629,7 @@ exports[`EuiPageHeaderContent props tabs is rendered with tabsProps 1`] = `
           type="button"
         >
           <span
-            class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
+            class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
           >
             Tab 2
           </span>
diff --git a/packages/eui/src/components/page/page_header/page_header_content.tsx b/packages/eui/src/components/page/page_header/page_header_content.tsx
index d15464e18fd..c36f22f2953 100644
--- a/packages/eui/src/components/page/page_header/page_header_content.tsx
+++ b/packages/eui/src/components/page/page_header/page_header_content.tsx
@@ -10,7 +10,7 @@ import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../../common';
 import { EuiIcon, EuiIconProps, IconType } from '../../icon';
-import { EuiTab, EuiTabs, EuiTabsProps } from '../../tabs';
+import { EuiTab, EuiTabs, EuiTabsProps, EuiTabsSizes } from '../../tabs';
 import { Props as EuiTabProps } from '../../tabs/tab';
 import { EuiFlexGroup, EuiFlexItem, EuiFlexGroupProps } from '../../flex';
 import { EuiSpacer } from '../../spacer';
@@ -19,6 +19,7 @@ import { EuiText } from '../../text';
 import {
   useIsWithinBreakpoints,
   useEuiMemoizedStyles,
+  useEuiTheme,
 } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiBreadcrumbs, EuiBreadcrumbsProps } from '../../breadcrumbs';
@@ -174,11 +175,17 @@ export const EuiPageHeaderContent: FunctionComponent<
     !!responsive
   );
 
+  const { euiTheme } = useEuiTheme();
+
   const classes = classNames('euiPageHeaderContent', className);
   const pageHeaderStyles = useEuiMemoizedStyles(euiPageHeaderStyles);
   const contentStyles = useEuiMemoizedStyles(euiPageHeaderContentStyles);
   const styles = setStyleForRestrictedPageWidth(restrictWidth, style);
 
+  // Get tabs size from theme, fallback to 'l' for other themes
+  const themeTabsSize = (euiTheme.components.pageHeader?.tabsSize ??
+    'l') as EuiTabsSizes;
+
   let paddingSides: LogicalSides = 'vertical';
   let paddingSize = _paddingSize;
   let bottomBorder = _bottom_border;
@@ -300,7 +307,7 @@ export const EuiPageHeaderContent: FunctionComponent<
       <>
         {pageTitleNode && <EuiSpacer />}
         {screenReaderPageTitle}
-        <EuiTabs {...tabsProps} bottomBorder={false} size="l">
+        <EuiTabs {...tabsProps} bottomBorder={false} size={themeTabsSize}>
           {renderTabs()}
         </EuiTabs>
       </>
diff --git a/packages/eui/src/components/tabs/index.ts b/packages/eui/src/components/tabs/index.ts
index 182f7bc8d70..9abae4551d1 100644
--- a/packages/eui/src/components/tabs/index.ts
+++ b/packages/eui/src/components/tabs/index.ts
@@ -8,7 +8,7 @@
 
 export type { EuiTabProps } from './tab';
 export { EuiTab } from './tab';
-export type { EuiTabsProps } from './tabs';
+export type { EuiTabsProps, EuiTabsSizes } from './tabs';
 export { EuiTabs } from './tabs';
 export type {
   EuiTabbedContentTab,
diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts
index 12b2e513919..55cfaa225f2 100644
--- a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts
+++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts
@@ -9,6 +9,7 @@
 import {
   _EuiThemeComponentColors,
   _EuiThemeComponents,
+  _EuiThemePageHeader,
 } from '@elastic/eui-theme-common';
 
 import { computed } from '../../../../services/theme/utils';
@@ -475,10 +476,16 @@ const component_colors: _EuiThemeComponentColors = {
   ),
 };
 
+// Amsterdam theme uses default tab size for pageHeader
+const pageHeader: _EuiThemePageHeader = {
+  tabsSize: 'l',
+};
+
 export const components: _EuiThemeComponents = {
   buttons,
   forms,
   emptyPrompt,
+  pageHeader,
   LIGHT: component_colors,
   DARK: {
     ...component_colors,
diff --git a/packages/eui/src/themes/json/eui_theme_borealis_dark.json b/packages/eui/src/themes/json/eui_theme_borealis_dark.json
index ed01cd7edb3..13aded72f3c 100644
--- a/packages/eui/src/themes/json/eui_theme_borealis_dark.json
+++ b/packages/eui/src/themes/json/eui_theme_borealis_dark.json
@@ -423,5 +423,10 @@
   "euiColorBorderStrongWarning": "#FACB3D",
   "euiColorBorderStrongRisk": "#FC8544",
   "euiColorBorderStrongDanger": "#F6726A",
-  "euiColorBorderStrongText": "#8E9FBC"
+  "euiColorBorderStrongText": "#8E9FBC",
+  "page": {
+    "pageHeader": {
+      "tabsSize": "m"
+    }
+  }
 }
diff --git a/packages/eui/src/themes/json/eui_theme_borealis_light.json b/packages/eui/src/themes/json/eui_theme_borealis_light.json
index 941b63776a6..3bed21e7bf8 100644
--- a/packages/eui/src/themes/json/eui_theme_borealis_light.json
+++ b/packages/eui/src/themes/json/eui_theme_borealis_light.json
@@ -423,5 +423,10 @@
   "euiColorBorderStrongWarning": "#966B03",
   "euiColorBorderStrongRisk": "#C24411",
   "euiColorBorderStrongDanger": "#C61E25",
-  "euiColorBorderStrongText": "#5A6D8C"
+  "euiColorBorderStrongText": "#5A6D8C",
+  "page": {
+    "pageHeader": {
+      "tabsSize": "m"
+    }
+  }
 }
diff --git a/packages/website/docs/components/layout/page-header.mdx b/packages/website/docs/components/layout/page-header.mdx
index ddabb6795eb..2e6429beb1f 100644
--- a/packages/website/docs/components/layout/page-header.mdx
+++ b/packages/website/docs/components/layout/page-header.mdx
@@ -34,49 +34,67 @@ export default () => (
 A set of `tabs` can be displayed inside the page header by passing an array of [EuiTab](../containers/tabs/index.mdx) objects using the `label` key for the tab content. When displaying tabs, the `bottomBorder` prop will be enforced to create separation of the header and content. You'll still need to manage the page content and selected tab in your own instance.
 
 ```tsx interactive
-import React from 'react';
+import React, { useState } from 'react';
 import { EuiPageHeader, EuiButton } from '@elastic/eui';
 
-export default () => (
-  <EuiPageHeader
-    pageTitle="Page title"
-    tabs={[
-      {
-        label: 'Tab 1',
-        isSelected: true,
-      },
-      {
-        label: 'Tab 2',
-      },
-    ]}
-    rightSideItems={[
-      <EuiButton fill>Add something</EuiButton>,
-      <EuiButton>Do something</EuiButton>,
-    ]}
-  />
-);
+export default () => {
+  const [selectedTabId, setSelectedTabId] = useState('tab1');
+
+  const tabs = [
+    {
+      label: 'Tab 1',
+      isSelected: selectedTabId === 'tab1',
+      onClick: () => setSelectedTabId('tab1'),
+    },
+    {
+      label: 'Tab 2',
+      isSelected: selectedTabId === 'tab2',
+      onClick: () => setSelectedTabId('tab2'),
+    },
+  ];
+
+  return (
+    <EuiPageHeader
+      pageTitle="Page title"
+      tabs={tabs}
+      rightSideItems={[
+        <EuiButton fill>Add something</EuiButton>,
+        <EuiButton>Do something</EuiButton>,
+      ]}
+    />
+  );
+};
 ```
 
 When supplying `tabs` without a `pageTitle`, **EuiPageHeader** will promote those tabs as if they are the page title. This means that any `description` or `children` will sit **below** the tabs and should used to describe the currently selected tab.
 
 ```tsx interactive
-import React from 'react';
+import React, { useState } from 'react';
 import { EuiPageHeader } from '@elastic/eui';
 
-export default () => (
-  <EuiPageHeader
-    tabs={[
-      {
-        label: 'Tab 1',
-        isSelected: true,
-      },
-      {
-        label: 'Tab 2',
-      },
-    ]}
-    description="This description should be describing the current page as depicted by the current tab. It has grow set to false to ensure a readable line-length."
-  />
-);
+export default () => {
+  const [selectedTabId, setSelectedTabId] = useState('tab1');
+
+  const tabs = [
+    {
+      label: 'Tab 1',
+      isSelected: selectedTabId === 'tab1',
+      onClick: () => setSelectedTabId('tab1'),
+    },
+    {
+      label: 'Tab 2',
+      isSelected: selectedTabId === 'tab2',
+      onClick: () => setSelectedTabId('tab2'),
+    },
+  ];
+
+  return (
+    <EuiPageHeader
+      tabs={tabs}
+      description="This description should be describing the current page as depicted by the current tab. It has grow set to false to ensure a readable line-length."
+    />
+  );
+};
 ```
 
 ## Breadcrumbs in the page header
diff --git a/packages/website/docs/components/templates/page-template/index.mdx b/packages/website/docs/components/templates/page-template/index.mdx
index 9f00acdfb57..4a474a22673 100644
--- a/packages/website/docs/components/templates/page-template/index.mdx
+++ b/packages/website/docs/components/templates/page-template/index.mdx
@@ -28,7 +28,7 @@ import centerSvg from '!url-loader!./content_center.svg';
 
 <Demo scope={{ contentSvg }}>
   ```tsx
-  import React from 'react';
+  import React, { useState } from 'react';
   import {
     EuiText,
     EuiButton,
@@ -42,6 +42,21 @@ import centerSvg from '!url-loader!./content_center.svg';
   const bottomBorder: EuiPageTemplateProps['bottomBorder'] = "extended";
 
   export default () => {
+    const [selectedTabId, setSelectedTabId] = useState('tab1');
+
+    const tabs = [
+      {
+        label: "Tab 1",
+        isSelected: selectedTabId === 'tab1',
+        onClick: () => setSelectedTabId('tab1'),
+      },
+      {
+        label: "Tab 2",
+        isSelected: selectedTabId === 'tab2',
+        onClick: () => setSelectedTabId('tab2'),
+      }
+    ];
+
     return (
       <EuiPageTemplate
         panelled={panelled}
@@ -62,7 +77,7 @@ import centerSvg from '!url-loader!./content_center.svg';
           pageTitle="Page title"
           rightSideItems={[<EuiButton>Right side item</EuiButton>]}
           description="Header description."
-          tabs={[{ label: "Tab 1", isSelected: true }, { label: "Tab 2" }]}
+          tabs={tabs}
         />
         <EuiPageTemplate.Section>
           <EuiImage size={"fullWidth"} alt="Fake paragraph" url={contentSvg} />