diff --git a/packages/app/.storybook/styles.css b/packages/app/.storybook/styles.css
index 5902d7822..7004cc20e 100644
--- a/packages/app/.storybook/styles.css
+++ b/packages/app/.storybook/styles.css
@@ -1,7 +1,6 @@
 #storybook-root {
   min-width: 375px;
   min-height: 400px;
-  background: rgb(var(--neutral-50));
 }
 
 /*
diff --git a/packages/app/src/features/easy-borrow/views/EasyBorrowView.stories.tsx b/packages/app/src/features/easy-borrow/views/EasyBorrowView.stories.tsx
index 2d885fd50..fbe9f0817 100644
--- a/packages/app/src/features/easy-borrow/views/EasyBorrowView.stories.tsx
+++ b/packages/app/src/features/easy-borrow/views/EasyBorrowView.stories.tsx
@@ -5,7 +5,7 @@ import { TokenSymbol } from '@/domain/types/TokenSymbol'
 import { Objective } from '@/features/actions/logic/types'
 import { getMockMarketInfo } from '@/test/integration/constants'
 import { NormalizedUnitNumber, Percentage } from '@marsfoundation/common-universal'
-import { WithTooltipProvider, ZeroAllowanceWagmiDecorator } from '@sb/decorators'
+import { WithClassname, WithTooltipProvider, ZeroAllowanceWagmiDecorator } from '@sb/decorators'
 import { tokens } from '@sb/tokens'
 import { getMobileStory, getTabletStory } from '@sb/viewports'
 import { Meta, StoryObj } from '@storybook/react'
@@ -121,7 +121,7 @@ function EasyBorrowViewStory(props: EasyBorrowViewStoryProps) {
 const meta: Meta<typeof EasyBorrowViewStory> = {
   title: 'Features/EasyBorrow/Views/EasyBorrowView',
   component: EasyBorrowViewStory,
-  decorators: [withRouter, WithTooltipProvider(), ZeroAllowanceWagmiDecorator()],
+  decorators: [withRouter, WithTooltipProvider(), ZeroAllowanceWagmiDecorator(), WithClassname('bg-secondary')],
   args: {
     pageState: 'form',
     assets: [
diff --git a/packages/app/src/features/farm-details/views/FarmDetailsView.stories.ts b/packages/app/src/features/farm-details/views/FarmDetailsView.stories.ts
index 9f9c10dd5..217cb22ed 100644
--- a/packages/app/src/features/farm-details/views/FarmDetailsView.stories.ts
+++ b/packages/app/src/features/farm-details/views/FarmDetailsView.stories.ts
@@ -1,6 +1,6 @@
 import { farmAddresses } from '@/config/chain/constants'
 import { NormalizedUnitNumber, Percentage } from '@marsfoundation/common-universal'
-import { WithTooltipProvider } from '@sb/decorators'
+import { WithClassname, WithTooltipProvider } from '@sb/decorators'
 import { tokens } from '@sb/tokens'
 import { getMobileStory, getTabletStory } from '@sb/viewports'
 import { Meta, StoryObj } from '@storybook/react'
@@ -13,7 +13,7 @@ import { FarmDetailsView } from './FarmDetailsView'
 const meta: Meta<typeof FarmDetailsView> = {
   title: 'Features/FarmDetails/Views/FarmDetailsView',
   component: FarmDetailsView,
-  decorators: [WithTooltipProvider(), withRouter],
+  decorators: [WithTooltipProvider(), withRouter, WithClassname('bg-secondary')],
   args: {
     chainId: mainnet.id,
     chainMismatch: false,
diff --git a/packages/app/src/features/farms/views/FarmsView.stories.ts b/packages/app/src/features/farms/views/FarmsView.stories.ts
index 7d7328ea7..3894b0a49 100644
--- a/packages/app/src/features/farms/views/FarmsView.stories.ts
+++ b/packages/app/src/features/farms/views/FarmsView.stories.ts
@@ -1,6 +1,6 @@
 import { AssetsGroup } from '@/domain/farms/types'
 import { NormalizedUnitNumber, Percentage } from '@marsfoundation/common-universal'
-import { WithTooltipProvider } from '@sb/decorators'
+import { WithClassname, WithTooltipProvider } from '@sb/decorators'
 import { tokens } from '@sb/tokens'
 import { getMobileStory, getTabletStory } from '@sb/viewports'
 import { Meta, StoryObj } from '@storybook/react'
@@ -53,7 +53,7 @@ const meta: Meta<typeof FarmsView> = {
   parameters: {
     layout: 'fullscreen',
   },
-  decorators: [WithTooltipProvider(), withRouter],
+  decorators: [WithTooltipProvider(), withRouter, WithClassname('bg-secondary')],
   args: {
     inactiveFarms,
     activeFarms,
diff --git a/packages/app/src/features/market-details/views/MarketDetailsView.stories.ts b/packages/app/src/features/market-details/views/MarketDetailsView.stories.ts
index a1bc8785b..d22fd3d6b 100644
--- a/packages/app/src/features/market-details/views/MarketDetailsView.stories.ts
+++ b/packages/app/src/features/market-details/views/MarketDetailsView.stories.ts
@@ -1,4 +1,4 @@
-import { WithDevContainer, WithTooltipProvider } from '@sb/decorators'
+import { WithClassname, WithDevContainer, WithTooltipProvider } from '@sb/decorators'
 import { tokens } from '@sb/tokens'
 import { getMobileStory, getTabletStory } from '@sb/viewports'
 import { Meta, StoryObj } from '@storybook/react'
@@ -18,7 +18,7 @@ const meta: Meta<typeof MarketDetailsView> = {
   parameters: {
     layout: 'fullscreen',
   },
-  decorators: [WithTooltipProvider(), WithDevContainer(), withRouter],
+  decorators: [WithTooltipProvider(), WithDevContainer(), withRouter, WithClassname('bg-secondary')],
 }
 
 export default meta
diff --git a/packages/app/src/features/my-portfolio/views/GuestView.stories.ts b/packages/app/src/features/my-portfolio/views/GuestView.stories.ts
index 1e8a1488c..dcf97f9cb 100644
--- a/packages/app/src/features/my-portfolio/views/GuestView.stories.ts
+++ b/packages/app/src/features/my-portfolio/views/GuestView.stories.ts
@@ -1,4 +1,4 @@
-import { WithTooltipProvider } from '@sb/decorators'
+import { WithClassname, WithTooltipProvider } from '@sb/decorators'
 import { getMobileStory, getTabletStory } from '@sb/viewports'
 import { Meta, StoryObj } from '@storybook/react'
 
@@ -7,7 +7,7 @@ import { GuestView } from './GuestView'
 const meta: Meta<typeof GuestView> = {
   title: 'Features/MyPortfolio/Views/GuestView',
   component: GuestView,
-  decorators: [WithTooltipProvider()],
+  decorators: [WithTooltipProvider(), WithClassname('bg-secondary')],
   args: {
     openConnectModal: () => {},
   },
diff --git a/packages/app/src/features/my-portfolio/views/PositionView.stories.ts b/packages/app/src/features/my-portfolio/views/PositionView.stories.ts
index fa6636b7e..9e08b9344 100644
--- a/packages/app/src/features/my-portfolio/views/PositionView.stories.ts
+++ b/packages/app/src/features/my-portfolio/views/PositionView.stories.ts
@@ -1,4 +1,4 @@
-import { WithTooltipProvider } from '@sb/decorators'
+import { WithClassname, WithTooltipProvider } from '@sb/decorators'
 import { tokens } from '@sb/tokens'
 import { getMobileStory, getTabletStory } from '@sb/viewports'
 import { Meta, StoryObj } from '@storybook/react'
@@ -11,7 +11,7 @@ import { PositionView } from './PositionView'
 const meta: Meta<typeof PositionView> = {
   title: 'Features/MyPortfolio/Views/PositionView',
   component: PositionView,
-  decorators: [withRouter, WithTooltipProvider()],
+  decorators: [withRouter, WithTooltipProvider(), WithClassname('bg-secondary')],
   args: {
     positionSummary: {
       totalCollateralUSD: NormalizedUnitNumber(167_600),
diff --git a/packages/app/src/features/savings/views/GuestView.stories.ts b/packages/app/src/features/savings/views/GuestView.stories.ts
index b0adb3817..ddf086037 100644
--- a/packages/app/src/features/savings/views/GuestView.stories.ts
+++ b/packages/app/src/features/savings/views/GuestView.stories.ts
@@ -2,7 +2,7 @@ import { UseMyEarningsInfoResult } from '@/domain/savings-charts/useMyEarningsIn
 import { UseSavingsRateInfoResult } from '@/domain/savings-charts/useSavingsRateInfo/useSavingsRateInfo'
 import { TokenSymbol } from '@/domain/types/TokenSymbol'
 import { NormalizedUnitNumber, Percentage } from '@marsfoundation/common-universal'
-import { WithTooltipProvider } from '@sb/decorators'
+import { WithClassname, WithTooltipProvider } from '@sb/decorators'
 import { tokens } from '@sb/tokens'
 import { getMobileStory, getTabletStory } from '@sb/viewports'
 import { Meta, StoryObj } from '@storybook/react'
@@ -60,7 +60,7 @@ const savingsTokenDetails = {
 const meta: Meta<typeof GuestView> = {
   title: 'Features/Savings/Views/GuestView',
   component: GuestView,
-  decorators: [WithTooltipProvider()],
+  decorators: [WithTooltipProvider(), WithClassname('bg-secondary')],
   parameters: {
     layout: 'fullscreen',
   },
diff --git a/packages/app/src/features/savings/views/SavingsDaiAndUSDSView.stories.ts b/packages/app/src/features/savings/views/SavingsDaiAndUSDSView.stories.ts
index 34c135543..bf5823507 100644
--- a/packages/app/src/features/savings/views/SavingsDaiAndUSDSView.stories.ts
+++ b/packages/app/src/features/savings/views/SavingsDaiAndUSDSView.stories.ts
@@ -2,7 +2,7 @@ import { UseMyEarningsInfoResult } from '@/domain/savings-charts/useMyEarningsIn
 import { UseSavingsRateInfoResult } from '@/domain/savings-charts/useSavingsRateInfo/useSavingsRateInfo'
 import { TokenSymbol } from '@/domain/types/TokenSymbol'
 import { NormalizedUnitNumber, Percentage } from '@marsfoundation/common-universal'
-import { WithTooltipProvider } from '@sb/decorators'
+import { WithClassname, WithTooltipProvider } from '@sb/decorators'
 import { tokens } from '@sb/tokens'
 import { getMobileStory, getTabletStory } from '@sb/viewports'
 import { Meta, StoryObj } from '@storybook/react'
@@ -128,7 +128,7 @@ const sDaiDetails = {
 const meta: Meta<typeof SavingsDaiAndUsdsView> = {
   title: 'Features/Savings/Views/SavingsDaiAndUsdsView',
   component: SavingsDaiAndUsdsView,
-  decorators: [WithTooltipProvider(), withRouter()],
+  decorators: [WithTooltipProvider(), withRouter(), WithClassname('bg-secondary')],
   parameters: {
     layout: 'fullscreen',
   },
diff --git a/packages/app/src/features/savings/views/SavingsDaiView.stories.ts b/packages/app/src/features/savings/views/SavingsDaiView.stories.ts
index 026d9300f..1eea78919 100644
--- a/packages/app/src/features/savings/views/SavingsDaiView.stories.ts
+++ b/packages/app/src/features/savings/views/SavingsDaiView.stories.ts
@@ -2,7 +2,7 @@ import { UseMyEarningsInfoResult } from '@/domain/savings-charts/useMyEarningsIn
 import { UseSavingsRateInfoResult } from '@/domain/savings-charts/useSavingsRateInfo/useSavingsRateInfo'
 import { TokenSymbol } from '@/domain/types/TokenSymbol'
 import { NormalizedUnitNumber, Percentage } from '@marsfoundation/common-universal'
-import { WithTooltipProvider } from '@sb/decorators'
+import { WithClassname, WithTooltipProvider } from '@sb/decorators'
 import { tokens } from '@sb/tokens'
 import { getMobileStory, getTabletStory } from '@sb/viewports'
 import { Meta, StoryObj } from '@storybook/react'
@@ -93,7 +93,7 @@ const savingsTokenDetails = {
 const meta: Meta<typeof SavingsDaiView> = {
   title: 'Features/Savings/Views/SavingsDaiView',
   component: SavingsDaiView,
-  decorators: [WithTooltipProvider()],
+  decorators: [WithTooltipProvider(), WithClassname('bg-secondary')],
   parameters: {
     layout: 'fullscreen',
   },
diff --git a/packages/app/src/features/savings/views/SavingsUSDSView.stories.ts b/packages/app/src/features/savings/views/SavingsUSDSView.stories.ts
index 9aafcfda5..5c83c1a07 100644
--- a/packages/app/src/features/savings/views/SavingsUSDSView.stories.ts
+++ b/packages/app/src/features/savings/views/SavingsUSDSView.stories.ts
@@ -2,7 +2,7 @@ import { UseMyEarningsInfoResult } from '@/domain/savings-charts/useMyEarningsIn
 import { UseSavingsRateInfoResult } from '@/domain/savings-charts/useSavingsRateInfo/useSavingsRateInfo'
 import { TokenSymbol } from '@/domain/types/TokenSymbol'
 import { NormalizedUnitNumber, Percentage } from '@marsfoundation/common-universal'
-import { WithTooltipProvider } from '@sb/decorators'
+import { WithClassname, WithTooltipProvider } from '@sb/decorators'
 import { tokens } from '@sb/tokens'
 import { getMobileStory, getTabletStory } from '@sb/viewports'
 import { Meta, StoryObj } from '@storybook/react'
@@ -92,7 +92,7 @@ const savingsTokenDetails = {
 const meta: Meta<typeof SavingsUsdsView> = {
   title: 'Features/Savings/Views/SavingsUsdsView',
   component: SavingsUsdsView,
-  decorators: [WithTooltipProvider()],
+  decorators: [WithTooltipProvider(), WithClassname('bg-secondary')],
   parameters: {
     layout: 'fullscreen',
   },