diff --git a/packages/app/src/features/dialogs/borrow/views/BorrowView.stories.tsx b/packages/app/src/features/dialogs/borrow/views/BorrowView.stories.tsx
index 547f1fa66..2be4c0180 100644
--- a/packages/app/src/features/dialogs/borrow/views/BorrowView.stories.tsx
+++ b/packages/app/src/features/dialogs/borrow/views/BorrowView.stories.tsx
@@ -14,7 +14,7 @@ const meta: Meta<typeof BorrowView> = {
     const form = useForm() as any
     return <BorrowView {...args} form={form} />
   },
-  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl'), WithTooltipProvider()],
+  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl bg-primary'), WithTooltipProvider()],
   args: {
     selectableAssets: [
       {
diff --git a/packages/app/src/features/dialogs/claim-rewards/views/ClaimRewardsView.stories.ts b/packages/app/src/features/dialogs/claim-rewards/views/ClaimRewardsView.stories.ts
index bcaf62554..42efccf11 100644
--- a/packages/app/src/features/dialogs/claim-rewards/views/ClaimRewardsView.stories.ts
+++ b/packages/app/src/features/dialogs/claim-rewards/views/ClaimRewardsView.stories.ts
@@ -24,7 +24,7 @@ const meta: Meta<typeof ClaimRewardsView> = {
       },
     }),
     WithTooltipProvider(),
-    WithClassname('max-w-xl'),
+    WithClassname('max-w-xl bg-primary'),
   ],
   args: {
     objectives: [
diff --git a/packages/app/src/features/dialogs/claim-rewards/views/SuccessView.stories.ts b/packages/app/src/features/dialogs/claim-rewards/views/SuccessView.stories.ts
index 81124dbe0..5c7c426f0 100644
--- a/packages/app/src/features/dialogs/claim-rewards/views/SuccessView.stories.ts
+++ b/packages/app/src/features/dialogs/claim-rewards/views/SuccessView.stories.ts
@@ -9,7 +9,7 @@ import { SuccessView } from './SuccessView'
 const meta: Meta<typeof SuccessView> = {
   title: 'Features/Dialogs/Views/ClaimRewards/Success',
   component: SuccessView,
-  decorators: [WithClassname('max-w-xl')],
+  decorators: [WithClassname('max-w-xl bg-primary')],
   args: {
     claimedRewards: [
       {
diff --git a/packages/app/src/features/dialogs/collateral/views/CollateralView.stories.ts b/packages/app/src/features/dialogs/collateral/views/CollateralView.stories.ts
index 7204523a6..87fc17b1e 100644
--- a/packages/app/src/features/dialogs/collateral/views/CollateralView.stories.ts
+++ b/packages/app/src/features/dialogs/collateral/views/CollateralView.stories.ts
@@ -10,7 +10,7 @@ import { CollateralView } from './CollateralView'
 
 const meta: Meta<typeof CollateralView> = {
   title: 'Features/Dialogs/Views/Collateral',
-  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl'), WithTooltipProvider()],
+  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl bg-primary'), WithTooltipProvider()],
   component: CollateralView,
   args: {
     collateral: {
diff --git a/packages/app/src/features/dialogs/collateral/views/SuccessView.stories.ts b/packages/app/src/features/dialogs/collateral/views/SuccessView.stories.ts
index 859912d16..5728c6998 100644
--- a/packages/app/src/features/dialogs/collateral/views/SuccessView.stories.ts
+++ b/packages/app/src/features/dialogs/collateral/views/SuccessView.stories.ts
@@ -8,7 +8,7 @@ import { SuccessView } from './SuccessView'
 const meta: Meta<typeof SuccessView> = {
   title: 'Features/Dialogs/Views/Success',
   component: SuccessView,
-  decorators: [WithClassname('max-w-xl')],
+  decorators: [WithClassname('max-w-xl bg-primary')],
   args: {
     token: tokens.ETH,
   },
diff --git a/packages/app/src/features/dialogs/common/views/SuccessView.stories.ts b/packages/app/src/features/dialogs/common/views/SuccessView.stories.ts
index 01713c133..293a6de68 100644
--- a/packages/app/src/features/dialogs/common/views/SuccessView.stories.ts
+++ b/packages/app/src/features/dialogs/common/views/SuccessView.stories.ts
@@ -10,7 +10,7 @@ import { SuccessView } from './SuccessView'
 const meta: Meta<typeof SuccessView> = {
   title: 'Features/Dialogs/Views/Success',
   component: SuccessView,
-  decorators: [WithClassname('max-w-xl')],
+  decorators: [WithClassname('max-w-xl bg-primary')],
   args: {
     tokenWithValue: {
       token: tokens.DAI,
diff --git a/packages/app/src/features/dialogs/convert-stables/components/form/ConvertStablesForm.stories.tsx b/packages/app/src/features/dialogs/convert-stables/components/form/ConvertStablesForm.stories.tsx
index 5a8ad1d71..2867de5d6 100644
--- a/packages/app/src/features/dialogs/convert-stables/components/form/ConvertStablesForm.stories.tsx
+++ b/packages/app/src/features/dialogs/convert-stables/components/form/ConvertStablesForm.stories.tsx
@@ -33,7 +33,7 @@ const meta: Meta<typeof ConvertStablesForm> = {
 
     return <ConvertStablesForm form={form} formFields={formFields} />
   },
-  decorators: [WithClassname('max-w-xl')],
+  decorators: [WithClassname('max-w-xl bg-primary')],
 }
 
 export default meta
diff --git a/packages/app/src/features/dialogs/convert-stables/views/ConvertStablesView.stories.tsx b/packages/app/src/features/dialogs/convert-stables/views/ConvertStablesView.stories.tsx
index 8bf3aaa06..4ec5bd121 100644
--- a/packages/app/src/features/dialogs/convert-stables/views/ConvertStablesView.stories.tsx
+++ b/packages/app/src/features/dialogs/convert-stables/views/ConvertStablesView.stories.tsx
@@ -25,7 +25,7 @@ const psmStables = [tokens.DAI.symbol, tokens.USDC.symbol, tokens.USDS.symbol]
 
 const meta: Meta<typeof ConvertStablesView> = {
   title: 'Features/Dialogs/Views/ConvertStables/ConvertStablesView',
-  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl'), WithTooltipProvider()],
+  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl bg-primary'), WithTooltipProvider()],
   component: (args) => {
     const { form, formFields } = useConvertStablesForm({
       tokensInfo: mockTokensInfo,
diff --git a/packages/app/src/features/dialogs/convert-stables/views/SuccessView.stories.ts b/packages/app/src/features/dialogs/convert-stables/views/SuccessView.stories.ts
index 865f08ef3..915495d56 100644
--- a/packages/app/src/features/dialogs/convert-stables/views/SuccessView.stories.ts
+++ b/packages/app/src/features/dialogs/convert-stables/views/SuccessView.stories.ts
@@ -9,7 +9,7 @@ import { SuccessView } from './SuccessView'
 const meta: Meta<typeof SuccessView> = {
   title: 'Features/Dialogs/Views/ConvertStables/SuccessView',
   component: SuccessView,
-  decorators: [WithClassname('max-w-xl'), ZeroAllowanceWagmiDecorator()],
+  decorators: [WithClassname('max-w-xl bg-primary'), ZeroAllowanceWagmiDecorator()],
   args: {
     txOverview: {
       status: 'success',
diff --git a/packages/app/src/features/dialogs/deposit/views/DepositView.stories.tsx b/packages/app/src/features/dialogs/deposit/views/DepositView.stories.tsx
index 9206647b9..492482e51 100644
--- a/packages/app/src/features/dialogs/deposit/views/DepositView.stories.tsx
+++ b/packages/app/src/features/dialogs/deposit/views/DepositView.stories.tsx
@@ -14,7 +14,7 @@ const meta: Meta<typeof DepositView> = {
     const form = useForm() as any
     return <DepositView {...args} form={form} />
   },
-  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl'), WithTooltipProvider()],
+  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl bg-primary'), WithTooltipProvider()],
   args: {
     initialToken: tokens.USDC,
     selectableAssets: [
diff --git a/packages/app/src/features/dialogs/e-mode/views/EModeView.stories.ts b/packages/app/src/features/dialogs/e-mode/views/EModeView.stories.ts
index 05f0f5369..989db44a0 100644
--- a/packages/app/src/features/dialogs/e-mode/views/EModeView.stories.ts
+++ b/packages/app/src/features/dialogs/e-mode/views/EModeView.stories.ts
@@ -11,7 +11,7 @@ import { EModeView } from './EModeView'
 
 const meta: Meta<typeof EModeView> = {
   title: 'Features/Dialogs/Views/EMode',
-  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl'), WithTooltipProvider(), withRouter],
+  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl bg-primary'), WithTooltipProvider(), withRouter],
   component: EModeView,
   args: {
     eModeCategories: {
diff --git a/packages/app/src/features/dialogs/e-mode/views/SuccessView.stories.ts b/packages/app/src/features/dialogs/e-mode/views/SuccessView.stories.ts
index e61c0d8d5..5f2261b52 100644
--- a/packages/app/src/features/dialogs/e-mode/views/SuccessView.stories.ts
+++ b/packages/app/src/features/dialogs/e-mode/views/SuccessView.stories.ts
@@ -7,7 +7,7 @@ import { SuccessView } from './SuccessView'
 const meta: Meta<typeof SuccessView> = {
   title: 'Features/Dialogs/Views/Success',
   component: SuccessView,
-  decorators: [WithClassname('max-w-xl')],
+  decorators: [WithClassname('max-w-xl bg-primary')],
 }
 
 export default meta
diff --git a/packages/app/src/features/dialogs/repay/views/RepayView.stories.tsx b/packages/app/src/features/dialogs/repay/views/RepayView.stories.tsx
index 42be14d16..5a8447582 100644
--- a/packages/app/src/features/dialogs/repay/views/RepayView.stories.tsx
+++ b/packages/app/src/features/dialogs/repay/views/RepayView.stories.tsx
@@ -14,7 +14,7 @@ const meta: Meta<typeof RepayView> = {
     const form = useForm() as any
     return <RepayView {...args} form={form} />
   },
-  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl'), WithTooltipProvider()],
+  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl bg-primary'), WithTooltipProvider()],
   args: {
     debtAsset: tokens.DAI,
     repayOptions: [
diff --git a/packages/app/src/features/dialogs/sandbox/views/SandboxDialogView.stories.ts b/packages/app/src/features/dialogs/sandbox/views/SandboxDialogView.stories.ts
index 2799bae2c..4f11a61e1 100644
--- a/packages/app/src/features/dialogs/sandbox/views/SandboxDialogView.stories.ts
+++ b/packages/app/src/features/dialogs/sandbox/views/SandboxDialogView.stories.ts
@@ -7,7 +7,7 @@ import { SandboxDialogView } from './SandboxDialogView'
 const meta: Meta<typeof SandboxDialogView> = {
   title: 'Features/Dialogs/Views/Sandbox',
   component: SandboxDialogView,
-  decorators: [WithClassname('max-w-xl')],
+  decorators: [WithClassname('max-w-xl bg-primary')],
   args: {
     startSandbox: () => {},
     isInSandbox: false,
diff --git a/packages/app/src/features/dialogs/savings/deposit/views/SavingsDepositView.stories.tsx b/packages/app/src/features/dialogs/savings/deposit/views/SavingsDepositView.stories.tsx
index d1b3d4408..c8a0043be 100644
--- a/packages/app/src/features/dialogs/savings/deposit/views/SavingsDepositView.stories.tsx
+++ b/packages/app/src/features/dialogs/savings/deposit/views/SavingsDepositView.stories.tsx
@@ -38,7 +38,7 @@ const meta: Meta<typeof SavingsDepositView> = {
     const form = useForm() as any
     return <SavingsDepositView {...args} form={form} />
   },
-  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl'), WithTooltipProvider()],
+  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl bg-primary'), WithTooltipProvider()],
   args: {
     selectableAssets: [
       {
diff --git a/packages/app/src/features/dialogs/savings/migrate/downgrade/views/DowngradeUSDSToDaiView.stories.tsx b/packages/app/src/features/dialogs/savings/migrate/downgrade/views/DowngradeUSDSToDaiView.stories.tsx
index 1b9c7ace0..a76a1f7c8 100644
--- a/packages/app/src/features/dialogs/savings/migrate/downgrade/views/DowngradeUSDSToDaiView.stories.tsx
+++ b/packages/app/src/features/dialogs/savings/migrate/downgrade/views/DowngradeUSDSToDaiView.stories.tsx
@@ -9,7 +9,7 @@ import { DowngradeUSDSToDaiView } from './DowngradeUSDSToDaiView'
 
 const meta: Meta<typeof DowngradeUSDSToDaiView> = {
   title: 'Features/Dialogs/Views/Migrate/Downgrade',
-  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl'), WithTooltipProvider(), withRouter],
+  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl bg-primary'), WithTooltipProvider(), withRouter],
   component: (args) => {
     const form = useForm() as any
     return <DowngradeUSDSToDaiView {...args} form={form} />
diff --git a/packages/app/src/features/dialogs/savings/migrate/upgrade/views/UpgradeView.stories.tsx b/packages/app/src/features/dialogs/savings/migrate/upgrade/views/UpgradeView.stories.tsx
index bbff5860b..1a2cd8a5f 100644
--- a/packages/app/src/features/dialogs/savings/migrate/upgrade/views/UpgradeView.stories.tsx
+++ b/packages/app/src/features/dialogs/savings/migrate/upgrade/views/UpgradeView.stories.tsx
@@ -8,7 +8,7 @@ import { UpgradeView } from './UpgradeView'
 
 const meta: Meta<typeof UpgradeView> = {
   title: 'Features/Dialogs/Views/Migrate/Upgrade',
-  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl'), WithTooltipProvider()],
+  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl bg-primary'), WithTooltipProvider()],
   component: (args) => {
     const form = useForm() as any
     return <UpgradeView {...args} form={form} />
diff --git a/packages/app/src/features/dialogs/savings/withdraw/views/SavingsWithdrawView.stories.tsx b/packages/app/src/features/dialogs/savings/withdraw/views/SavingsWithdrawView.stories.tsx
index 2c50c8367..675c30024 100644
--- a/packages/app/src/features/dialogs/savings/withdraw/views/SavingsWithdrawView.stories.tsx
+++ b/packages/app/src/features/dialogs/savings/withdraw/views/SavingsWithdrawView.stories.tsx
@@ -119,7 +119,12 @@ const sendArgs: Partial<SavingsWithdrawViewProps> = {
 
 const meta: Meta<typeof SavingsWithdrawView> = {
   title: 'Features/Dialogs/Views/Savings/Withdraw',
-  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl'), WithTooltipProvider(), withRouter()],
+  decorators: [
+    ZeroAllowanceWagmiDecorator(),
+    WithClassname('max-w-xl bg-primary'),
+    WithTooltipProvider(),
+    withRouter(),
+  ],
   component: (args) => {
     const form = useForm() as any
     return args.sendModeExtension ? (
diff --git a/packages/app/src/features/dialogs/savings/withdraw/views/SuccessView.stories.ts b/packages/app/src/features/dialogs/savings/withdraw/views/SuccessView.stories.ts
index 9f4157b8c..5d4502737 100644
--- a/packages/app/src/features/dialogs/savings/withdraw/views/SuccessView.stories.ts
+++ b/packages/app/src/features/dialogs/savings/withdraw/views/SuccessView.stories.ts
@@ -10,7 +10,7 @@ import { SuccessView } from './SuccessView'
 const meta: Meta<typeof SuccessView> = {
   title: 'Features/Dialogs/Views/Savings/Withdraw/Success',
   component: SuccessView,
-  decorators: [WithClassname('max-w-xl'), ZeroAllowanceWagmiDecorator(), withRouter],
+  decorators: [WithClassname('max-w-xl bg-primary'), ZeroAllowanceWagmiDecorator(), withRouter],
   args: {
     tokenToWithdraw: {
       token: tokens.DAI,
diff --git a/packages/app/src/features/dialogs/select-network/views/SelectNetworkDialogView.stories.ts b/packages/app/src/features/dialogs/select-network/views/SelectNetworkDialogView.stories.ts
index 8c6d85b19..715842169 100644
--- a/packages/app/src/features/dialogs/select-network/views/SelectNetworkDialogView.stories.ts
+++ b/packages/app/src/features/dialogs/select-network/views/SelectNetworkDialogView.stories.ts
@@ -8,7 +8,7 @@ import { SelectNetworkDialogView } from './SelectNetworkDialogView'
 const meta: Meta<typeof SelectNetworkDialogView> = {
   title: 'Features/Dialogs/Views/SelectNetwork',
   component: SelectNetworkDialogView,
-  decorators: [WithClassname('max-w-xl')],
+  decorators: [WithClassname('max-w-xl bg-primary')],
   args: {
     chains: [
       {
diff --git a/packages/app/src/features/dialogs/withdraw/views/WithdrawView.stories.tsx b/packages/app/src/features/dialogs/withdraw/views/WithdrawView.stories.tsx
index 9430bdf41..9d8add0ab 100644
--- a/packages/app/src/features/dialogs/withdraw/views/WithdrawView.stories.tsx
+++ b/packages/app/src/features/dialogs/withdraw/views/WithdrawView.stories.tsx
@@ -14,7 +14,7 @@ const meta: Meta<typeof WithdrawView> = {
     const form = useForm() as any
     return <WithdrawView {...args} form={form} />
   },
-  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl'), WithTooltipProvider()],
+  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl bg-primary'), WithTooltipProvider()],
   args: {
     withdrawOptions: [
       {
diff --git a/packages/app/src/features/farm-details/dialogs/claim/views/ClaimView.stories.ts b/packages/app/src/features/farm-details/dialogs/claim/views/ClaimView.stories.ts
index b2cefd1d9..16cb2ed04 100644
--- a/packages/app/src/features/farm-details/dialogs/claim/views/ClaimView.stories.ts
+++ b/packages/app/src/features/farm-details/dialogs/claim/views/ClaimView.stories.ts
@@ -8,7 +8,7 @@ import { ClaimView } from './ClaimView'
 const meta: Meta<typeof ClaimView> = {
   title: 'Features/FarmDetails/Dialogs/Claim/Views/ClaimView',
   component: ClaimView,
-  decorators: [WithClassname('max-w-xl'), ZeroAllowanceWagmiDecorator()],
+  decorators: [WithClassname('max-w-xl bg-white'), ZeroAllowanceWagmiDecorator()],
   args: {
     txOverview: {
       reward: {
diff --git a/packages/app/src/features/farm-details/dialogs/stake/views/StakeView.stories.tsx b/packages/app/src/features/farm-details/dialogs/stake/views/StakeView.stories.tsx
index 891f7625b..cf34c18f2 100644
--- a/packages/app/src/features/farm-details/dialogs/stake/views/StakeView.stories.tsx
+++ b/packages/app/src/features/farm-details/dialogs/stake/views/StakeView.stories.tsx
@@ -83,7 +83,7 @@ const meta: Meta<typeof StakeView> = {
     const form = useForm() as any
     return <StakeView {...args} form={form} />
   },
-  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl'), WithTooltipProvider()],
+  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl bg-primary'), WithTooltipProvider()],
   args: {
     farm,
     selectableAssets: [
diff --git a/packages/app/src/features/farm-details/dialogs/unstake/views/SuccessView.stories.ts b/packages/app/src/features/farm-details/dialogs/unstake/views/SuccessView.stories.ts
index 7ba04d32f..b1f0965d4 100644
--- a/packages/app/src/features/farm-details/dialogs/unstake/views/SuccessView.stories.ts
+++ b/packages/app/src/features/farm-details/dialogs/unstake/views/SuccessView.stories.ts
@@ -8,7 +8,7 @@ import { SuccessView } from './SuccessView'
 const meta: Meta<typeof SuccessView> = {
   title: 'Features/FarmDetails/Dialogs/Views/Unstake/SuccessView',
   component: SuccessView,
-  decorators: [WithClassname('max-w-xl'), ZeroAllowanceWagmiDecorator()],
+  decorators: [WithClassname('max-w-xl bg-primary'), ZeroAllowanceWagmiDecorator()],
   args: {
     outcome: {
       token: tokens.DAI,
diff --git a/packages/app/src/features/farm-details/dialogs/unstake/views/UnstakeView.stories.tsx b/packages/app/src/features/farm-details/dialogs/unstake/views/UnstakeView.stories.tsx
index 97dcd2790..34aee0719 100644
--- a/packages/app/src/features/farm-details/dialogs/unstake/views/UnstakeView.stories.tsx
+++ b/packages/app/src/features/farm-details/dialogs/unstake/views/UnstakeView.stories.tsx
@@ -90,7 +90,7 @@ const meta: Meta<typeof UnstakeView> = {
     })
     return <UnstakeView {...args} form={form} />
   },
-  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl'), WithTooltipProvider()],
+  decorators: [ZeroAllowanceWagmiDecorator(), WithClassname('max-w-xl bg-primary'), WithTooltipProvider()],
   args: {
     farm,
     selectableAssets: [