diff --git a/packages/canon/src/components/Header/Header.tsx b/packages/canon/src/components/Header/Header.tsx
index 84def7deaa..e6aae08eeb 100644
--- a/packages/canon/src/components/Header/Header.tsx
+++ b/packages/canon/src/components/Header/Header.tsx
@@ -16,7 +16,7 @@
 
 import type { HeaderProps } from './types';
 import { HeaderToolbar } from './HeaderToolbar';
-import { Tabs, Tab } from '../Tabs';
+import { Tabs, TabList, Tab } from '../Tabs';
 import { useStyles } from '../../hooks/useStyles';
 import { type NavigateOptions } from 'react-router-dom';
 
@@ -51,11 +51,13 @@ export const Header = (props: HeaderProps) => {
       {tabs && (
         <div className={classNames.tabsWrapper}>
           <Tabs>
-            {tabs?.map(tab => (
-              <Tab key={tab.id} id={tab.id} href={tab.href}>
-                {tab.label}
-              </Tab>
-            ))}
+            <TabList>
+              {tabs?.map(tab => (
+                <Tab key={tab.id} id={tab.id} href={tab.href}>
+                  {tab.label}
+                </Tab>
+              ))}
+            </TabList>
           </Tabs>
         </div>
       )}
diff --git a/packages/canon/src/components/HeaderPage/HeaderPage.tsx b/packages/canon/src/components/HeaderPage/HeaderPage.tsx
index e075033719..6ff22ff2ec 100644
--- a/packages/canon/src/components/HeaderPage/HeaderPage.tsx
+++ b/packages/canon/src/components/HeaderPage/HeaderPage.tsx
@@ -21,7 +21,7 @@ import { Flex } from '../Flex';
 import { Menu } from '../Menu';
 import { ButtonIcon } from '../ButtonIcon';
 import { RiMore2Line } from '@remixicon/react';
-import { Tabs, Tab } from '../Tabs';
+import { Tabs, TabList, Tab } from '../Tabs';
 
 /**
  * A component that renders a header page.
@@ -71,11 +71,13 @@ export const HeaderPage = (props: HeaderPageProps) => {
       </Flex>
       {tabs && (
         <Tabs>
-          {tabs.map(tab => (
-            <Tab key={tab.id} id={tab.id} href={tab.href}>
-              {tab.label}
-            </Tab>
-          ))}
+          <TabList>
+            {tabs.map(tab => (
+              <Tab key={tab.id} id={tab.id} href={tab.href}>
+                {tab.label}
+              </Tab>
+            ))}
+          </TabList>
         </Tabs>
       )}
     </Flex>