diff --git a/packages/ui/src/components/HeaderPage/HeaderPage.stories.tsx b/packages/ui/src/components/HeaderPage/HeaderPage.stories.tsx
index bba6e8a857..9e6e63ddf5 100644
--- a/packages/ui/src/components/HeaderPage/HeaderPage.stories.tsx
+++ b/packages/ui/src/components/HeaderPage/HeaderPage.stories.tsx
@@ -44,27 +44,22 @@ const tabs: HeaderTab[] = [
   {
     id: 'overview',
     label: 'Overview',
-    href: '/overview',
   },
   {
     id: 'checks',
     label: 'Checks',
-    href: '/checks',
   },
   {
     id: 'tracks',
     label: 'Tracks',
-    href: '/tracks',
   },
   {
     id: 'campaigns',
     label: 'Campaigns',
-    href: '/campaigns',
   },
   {
     id: 'integrations',
     label: 'Integrations',
-    href: '/integrations',
   },
 ];
 
@@ -94,19 +89,10 @@ const withRouter = (Story: StoryFn) => (
   </MemoryRouter>
 );
 
-// White background decorator for stories
-const withWhiteBackground = (Story: StoryFn) => (
-  <div
-    style={{ backgroundColor: 'white', padding: '20px', borderRadius: '4px' }}
-  >
-    <Story />
-  </div>
-);
-
 // Extract layout decorator as a reusable constant
 const layoutDecorator = [
   (Story: StoryFn) => (
-    <div style={{ backgroundColor: 'white' }}>
+    <>
       <div
         style={{
           width: '250px',
@@ -135,7 +121,7 @@ const layoutDecorator = [
           </Text>
         </Container>
       </div>
-    </div>
+    </>
   ),
 ];
 
@@ -143,7 +129,6 @@ export const Default: Story = {
   args: {
     title: 'Page Title',
   },
-  decorators: [withWhiteBackground],
 };
 
 export const WithTabs: Story = {
@@ -151,11 +136,11 @@ export const WithTabs: Story = {
     ...Default.args,
     tabs,
   },
-  decorators: [withRouter, withWhiteBackground],
+  decorators: [withRouter],
 };
 
 export const WithCustomActions: Story = {
-  decorators: [withRouter, withWhiteBackground],
+  decorators: [withRouter],
   render: () => (
     <HeaderPage
       {...Default.args}
@@ -187,7 +172,7 @@ export const WithCustomActions: Story = {
 };
 
 export const WithBreadcrumbs: Story = {
-  decorators: [withRouter, withWhiteBackground],
+  decorators: [withRouter],
   args: {
     ...Default.args,
     breadcrumbs: [{ label: 'Home', href: '/' }],
@@ -195,7 +180,7 @@ export const WithBreadcrumbs: Story = {
 };
 
 export const WithLongBreadcrumbs: Story = {
-  decorators: [withRouter, withWhiteBackground],
+  decorators: [withRouter],
   args: {
     ...Default.args,
     breadcrumbs: [
@@ -206,7 +191,7 @@ export const WithLongBreadcrumbs: Story = {
 };
 
 export const WithEverything: Story = {
-  decorators: [withRouter, withWhiteBackground],
+  decorators: [withRouter],
   render: () => (
     <HeaderPage
       {...Default.args}
@@ -226,7 +211,6 @@ export const WithLayout: Story = {
 };
 
 export const WithTabsMatchingStrategies: Story = {
-  decorators: [withWhiteBackground],
   args: {
     title: 'Route Matching Demo',
     tabs: [
@@ -287,7 +271,6 @@ export const WithTabsMatchingStrategies: Story = {
 };
 
 export const WithTabsExactMatching: Story = {
-  decorators: [withWhiteBackground],
   args: {
     title: 'Exact Matching Demo',
     tabs: [
@@ -327,7 +310,6 @@ export const WithTabsExactMatching: Story = {
 };
 
 export const WithTabsPrefixMatchingDeep: Story = {
-  decorators: [withWhiteBackground],
   args: {
     title: 'Deep Nesting Demo',
     tabs: [
diff --git a/packages/ui/src/components/Tabs/Tabs.stories.tsx b/packages/ui/src/components/Tabs/Tabs.stories.tsx
index a38eab5d42..c818d0fe4b 100644
--- a/packages/ui/src/components/Tabs/Tabs.stories.tsx
+++ b/packages/ui/src/components/Tabs/Tabs.stories.tsx
@@ -34,32 +34,17 @@ const withRouter = (Story: StoryFn) => (
   </MemoryRouter>
 );
 
-// White background decorator for stories
-const withWhiteBackground = (Story: StoryFn) => (
-  <div
-    style={{ backgroundColor: 'white', padding: '20px', borderRadius: '4px' }}
-  >
-    <Story />
-  </div>
-);
-
 export const Default: Story = {
   args: {
     children: '',
   },
-  decorators: [withRouter, withWhiteBackground],
+  decorators: [withRouter],
   render: () => (
     <Tabs>
       <TabList>
-        <Tab id="tab1" href="/tab1">
-          Tab 1
-        </Tab>
-        <Tab id="tab2" href="/tab2">
-          Tab 2
-        </Tab>
-        <Tab id="tab3" href="/tab3">
-          Tab 3 With long title
-        </Tab>
+        <Tab id="tab1">Tab 1</Tab>
+        <Tab id="tab2">Tab 2</Tab>
+        <Tab id="tab3">Tab 3 With long title</Tab>
       </TabList>
     </Tabs>
   ),
@@ -69,7 +54,7 @@ export const WithTabPanels: Story = {
   args: {
     children: '',
   },
-  decorators: [withRouter, withWhiteBackground],
+  decorators: [withRouter],
   render: () => (
     <Tabs>
       <TabList>
@@ -94,7 +79,6 @@ export const WithMockedURLTab2: Story = {
   args: {
     children: '',
   },
-  decorators: [withWhiteBackground],
   render: () => (
     <MemoryRouter initialEntries={['/tab2']}>
       <Tabs>
@@ -127,7 +111,6 @@ export const WithMockedURLTab3: Story = {
   args: {
     children: '',
   },
-  decorators: [withWhiteBackground],
   render: () => (
     <MemoryRouter initialEntries={['/tab3']}>
       <Tabs>
@@ -160,7 +143,6 @@ export const WithMockedURLNoMatch: Story = {
   args: {
     children: '',
   },
-  decorators: [withWhiteBackground],
   render: () => (
     <MemoryRouter initialEntries={['/some-other-page']}>
       <Tabs>
@@ -199,7 +181,6 @@ export const ExactMatchingDefault: Story = {
   args: {
     children: '',
   },
-  decorators: [withWhiteBackground],
   render: () => (
     <MemoryRouter initialEntries={['/mentorship/events']}>
       <Tabs>
@@ -236,7 +217,6 @@ export const PrefixMatchingForNestedRoutes: Story = {
   args: {
     children: '',
   },
-  decorators: [withWhiteBackground],
   render: () => (
     <MemoryRouter initialEntries={['/mentorship/events']}>
       <Tabs>
@@ -277,7 +257,6 @@ export const PrefixMatchingDeepNesting: Story = {
   args: {
     children: '',
   },
-  decorators: [withWhiteBackground],
   render: () => (
     <MemoryRouter initialEntries={['/catalog/users/john/details']}>
       <Tabs>
@@ -313,7 +292,6 @@ export const MixedMatchingStrategies: Story = {
   args: {
     children: '',
   },
-  decorators: [withWhiteBackground],
   render: () => (
     <MemoryRouter initialEntries={['/dashboard/analytics/reports']}>
       <Tabs>
@@ -365,7 +343,6 @@ export const PrefixMatchingEdgeCases: Story = {
   args: {
     children: '',
   },
-  decorators: [withWhiteBackground],
   render: () => (
     <MemoryRouter initialEntries={['/foobar']}>
       <Tabs>
@@ -408,7 +385,6 @@ export const PrefixMatchingWithSlash: Story = {
   args: {
     children: '',
   },
-  decorators: [withWhiteBackground],
   render: () => (
     <MemoryRouter initialEntries={['/foo/bar']}>
       <Tabs>
@@ -450,7 +426,6 @@ export const RootPathMatching: Story = {
   args: {
     children: '',
   },
-  decorators: [withWhiteBackground],
   render: () => (
     <MemoryRouter initialEntries={['/']}>
       <Tabs>
@@ -485,7 +460,6 @@ export const AutoSelectionOfTabs: Story = {
   args: {
     children: '',
   },
-  decorators: [withWhiteBackground],
   render: () => (
     <MemoryRouter initialEntries={['/random-page']}>
       <div style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}>