diff --git a/packages/ui/src/components/Header/Header.stories.tsx b/packages/ui/src/components/Header/Header.stories.tsx
index 607d033ea4..7d6b6c6e56 100644
--- a/packages/ui/src/components/Header/Header.stories.tsx
+++ b/packages/ui/src/components/Header/Header.stories.tsx
@@ -40,7 +40,7 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const withRouter = (Story: StoryFn) => (
+const withRouter = (Story: StoryFn) => (
   <MemoryRouter>
     <Story />
   </MemoryRouter>
@@ -113,7 +113,7 @@ const menuItems: HeaderMenuItem[] = [
 ];
 
 // Extract layout decorator as a reusable constant
-export const layoutDecorator = [
+const layoutDecorator = [
   (Story: StoryFn) => (
     <>
       <div
diff --git a/packages/ui/src/components/HeaderPage/HeaderPage.stories.tsx b/packages/ui/src/components/HeaderPage/HeaderPage.stories.tsx
index 3d755c2855..f67012567e 100644
--- a/packages/ui/src/components/HeaderPage/HeaderPage.stories.tsx
+++ b/packages/ui/src/components/HeaderPage/HeaderPage.stories.tsx
@@ -14,11 +14,13 @@
  * limitations under the License.
  */
 
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 import { HeaderPage } from './HeaderPage';
 import type { HeaderTab, HeaderMenuItem } from '../Header/types';
 import { Button } from '../Button';
-import { layoutDecorator, withRouter } from '../Header/Header.stories';
+import { MemoryRouter } from 'react-router-dom';
+import { Container } from '../Container';
+import { Text } from '../Text';
 
 const meta = {
   title: 'Components/HeaderPage',
@@ -31,6 +33,12 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
+const withRouter = (Story: StoryFn) => (
+  <MemoryRouter>
+    <Story />
+  </MemoryRouter>
+);
+
 const tabs: HeaderTab[] = [
   {
     id: 'overview',
@@ -65,6 +73,57 @@ const menuItems: HeaderMenuItem[] = [
   },
 ];
 
+// Extract layout decorator as a reusable constant
+export const layoutDecorator = [
+  (Story: StoryFn) => (
+    <>
+      <div
+        style={{
+          width: '250px',
+          position: 'fixed',
+          left: 'var(--sb-panel-left)',
+          top: 'var(--sb-panel-top)',
+          bottom: 'var(--sb-panel-bottom)',
+          backgroundColor: 'var(--bui-bg-surface-1)',
+          borderRadius: 'var(--sb-panel-radius)',
+          border: 'var(--sb-sidebar-border)',
+          borderRight: 'var(--sb-sidebar-border-right)',
+          zIndex: 1,
+        }}
+      />
+      <div
+        style={{
+          paddingInline: 'var(--sb-content-padding-inline)',
+          minHeight: '200vh',
+        }}
+      >
+        <Story />
+        <Container>
+          <Text>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam,
+            quos.
+          </Text>
+        </Container>
+      </div>
+      <div
+        style={{
+          width: '250px',
+          position: 'fixed',
+          right: 'var(--sb-panel-right)',
+          top: 'var(--sb-panel-top)',
+          bottom: 'var(--sb-panel-bottom)',
+          backgroundColor: 'var(--bui-bg-surface-1)',
+          borderRadius: 'var(--sb-panel-radius)',
+          border: 'var(--sb-options-border)',
+          borderLeft: 'var(--sb-options-border-left)',
+          zIndex: 1,
+        }}
+      />
+    </>
+  ),
+  withRouter,
+];
+
 export const Default: Story = {
   args: {
     title: 'Header Page',