diff --git a/.storybook/main.ts b/.storybook/main.ts
index 9ad0b819..53772323 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,6 +1,6 @@
-import { StorybookConfig } from '@storybook/react-vite'
+import { defineMain } from '@storybook/react-vite/node'
 
-const config: StorybookConfig = {
+export default defineMain({
   stories: [
     '../src/docs/Introduction.mdx',
     '../src/docs/*.mdx',
@@ -19,5 +19,4 @@ const config: StorybookConfig = {
   },
   staticDirs: ['../public'],
   framework: '@storybook/react-vite',
-}
-export default config
+})
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index a290cd1b..44b03692 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,4 +1,4 @@
-import type { Preview } from '@storybook/react-vite'
+import { definePreview } from '@storybook/react-vite'
 import { INITIAL_VIEWPORTS } from 'storybook/viewport'
 import { userEvent } from '@testing-library/user-event'
 import { mswLoader, initialize } from 'msw-storybook-addon'
@@ -10,6 +10,10 @@ import { BrowserRouter } from 'react-router-dom'
 import React from 'react'
 import styled, { css, ThemeProvider } from 'styled-components'
 
+import addonVitest from '@storybook/addon-vitest'
+import addonA11y from '@storybook/addon-a11y'
+import addonDocs from '@storybook/addon-docs'
+
 import { demoModeLoader } from './demo-mode'
 import { rootReducer } from '../src/app-state'
 import { breakpoints } from '../src/styles/breakpoints'
@@ -206,7 +210,13 @@ const breakpointViewports = Object.keys(breakpoints).reduce(
   {} as typeof INITIAL_VIEWPORTS
 )
 
-const preview: Preview = {
+declare module 'storybook/internal/csf' {
+  interface StoryContext {
+    userEvent: ReturnType<typeof userEvent.setup>
+  }
+}
+export default definePreview({
+  addons: [addonVitest(), addonA11y(), addonDocs()],
   parameters: {
     viewport: {
       viewports: {
@@ -252,11 +262,4 @@ const preview: Preview = {
   },
   decorators: [withRouter, withTheme, withStore],
   loaders: [mswLoader, demoModeLoader],
-}
-
-declare module 'storybook/internal/csf' {
-  interface StoryContext {
-    userEvent: ReturnType<typeof userEvent.setup>
-  }
-}
-export default preview
+})
diff --git a/.storybook/vitest.setup.ts b/.storybook/vitest.setup.ts
deleted file mode 100644
index 731689f6..00000000
--- a/.storybook/vitest.setup.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview'
-import { beforeAll } from 'vitest'
-import { setProjectAnnotations } from '@storybook/react-vite'
-import * as projectAnnotations from './preview'
-
-const project = setProjectAnnotations([a11yAddonAnnotations, projectAnnotations])
-
-beforeAll(project.beforeAll)
diff --git a/package.json b/package.json
index 5095bce2..0826f468 100644
--- a/package.json
+++ b/package.json
@@ -68,13 +68,13 @@
     "@babel/core": "^7.26.9",
     "@chromatic-com/storybook": "4.0.0-next.6",
     "@eslint/js": "^9.21.0",
-    "@storybook/addon-a11y": "^9.0.0",
+    "@storybook/addon-a11y": "0.0.0-pr-30601-sha-40d66b1f",
     "@storybook/addon-coverage": "^1.0.5",
-    "@storybook/addon-designs": "9.0.0-next.3",
-    "@storybook/addon-docs": "^9.0.0",
-    "@storybook/addon-themes": "^9.0.0",
-    "@storybook/addon-vitest": "^9.0.0",
-    "@storybook/react-vite": "^9.0.0",
+    "@storybook/addon-designs": "^10.0.1",
+    "@storybook/addon-docs": "0.0.0-pr-30601-sha-40d66b1f",
+    "@storybook/addon-themes": "0.0.0-pr-30601-sha-40d66b1f",
+    "@storybook/addon-vitest": "0.0.0-pr-30601-sha-40d66b1f",
+    "@storybook/react-vite": "0.0.0-pr-30601-sha-40d66b1f",
     "@storybook/test-runner": "^0.22.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -103,7 +103,7 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-storybook": "^9.0.0",
+    "eslint-plugin-storybook": "0.0.0-pr-30601-sha-40d66b1f",
     "eslint-plugin-unicorn": "^57.0.0",
     "globals": "^16.0.0",
     "happy-dom": "^17.1.8",
@@ -117,8 +117,8 @@
     "prettier": "^3.5.2",
     "react-is": "^19.0.0",
     "react-test-renderer": "^19.0.0",
-    "storybook": "^9.0.0",
-    "storybook-addon-test-codegen": "^1.3.4",
+    "storybook": "0.0.0-pr-30601-sha-40d66b1f",
+    "storybook-addon-test-codegen": "^2.0.0",
     "typescript-eslint": "^8.25.0",
     "vite": "^6.2.0",
     "vitest": "^3.0.7",
@@ -129,5 +129,14 @@
   "packageManager": "yarn@4.2.1",
   "msw": {
     "workerDirectory": "public"
+  },
+  "imports": {
+    "#*": [
+      "./*",
+      "./*.ts",
+      "./*.tsx",
+      "./*.js",
+      "./*.jsx"
+    ]
   }
 }
diff --git a/src/components/AnimatedIllustration/AnimatedIllustration.stories.tsx b/src/components/AnimatedIllustration/AnimatedIllustration.stories.tsx
index 7c58dd5f..f5d61147 100644
--- a/src/components/AnimatedIllustration/AnimatedIllustration.stories.tsx
+++ b/src/components/AnimatedIllustration/AnimatedIllustration.stories.tsx
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { AnimatedIllustration } from './AnimatedIllustration'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/AnimatedIllustration',
   component: AnimatedIllustration,
   parameters: {
@@ -17,19 +17,16 @@ const meta = {
       </div>
     ),
   ],
-} satisfies Meta<typeof AnimatedIllustration>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const NotFound: Story = {
+export const NotFound = meta.story({
   args: {
     animation: 'NotFound',
   },
-}
+})
 
-export const Error: Story = {
+export const Error = meta.story({
   args: {
     animation: 'Error',
   },
-}
+})
diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
index 0e28ab4a..a23d9e0f 100644
--- a/src/components/Badge/Badge.stories.tsx
+++ b/src/components/Badge/Badge.stories.tsx
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { Badge } from './Badge'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Badge',
   component: Badge,
   parameters: {
@@ -11,13 +11,10 @@ const meta = {
       url: 'https://www.figma.com/file/XW4Bcjmj3JOILjKmZjjdQd/Mealdrop?node-id=780%3A2938',
     },
   },
-} satisfies Meta<typeof Badge>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   args: {
     text: 'Comfort food',
   },
-}
+})
diff --git a/src/components/Breadcrumb/Breadcrumb.stories.tsx b/src/components/Breadcrumb/Breadcrumb.stories.tsx
index d680cad3..bf8265eb 100644
--- a/src/components/Breadcrumb/Breadcrumb.stories.tsx
+++ b/src/components/Breadcrumb/Breadcrumb.stories.tsx
@@ -1,22 +1,19 @@
-import { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { Breadcrumb } from './Breadcrumb'
 
-const meta: Meta<typeof Breadcrumb> = {
+const meta = preview.meta({
   title: 'Components/Breadcrumb',
   component: Breadcrumb,
-}
+})
 
-export default meta
-type Story = StoryObj<typeof Breadcrumb>
-
-export const SingleItem: Story = {
+export const SingleItem = meta.story({
   args: {
     items: [{ label: 'categories' }],
   },
-}
+})
 
-export const MultipleItems: Story = {
+export const MultipleItems = meta.story({
   args: {
     items: [
       { label: 'home', path: '/' },
@@ -24,4 +21,4 @@ export const MultipleItems: Story = {
       { label: 'sushi' },
     ],
   },
-}
+})
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
index af8ce809..4b72a05c 100644
--- a/src/components/Button/Button.stories.tsx
+++ b/src/components/Button/Button.stories.tsx
@@ -1,9 +1,9 @@
-import type { StoryObj, Meta } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 import { expect } from 'storybook/test'
 
 import { Button } from './Button'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Button',
   component: Button,
   args: {
@@ -15,14 +15,11 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=1005%3A2974&t=8pzYUq8GyzmMGjJ2-4',
     },
   },
-} satisfies Meta<typeof Button>
-export default meta
+})
 
-type Story = StoryObj<typeof meta>
+export const Default = meta.story()
 
-export const Default: Story = {}
-
-export const Disabled: Story = {
+export const Disabled = meta.story({
   args: {
     disabled: true,
   },
@@ -30,22 +27,22 @@ export const Disabled: Story = {
     const button = await canvas.findByRole('button')
     await expect(button).toBeDisabled()
   },
-}
+})
 
-export const Clear: Story = {
+export const Clear = meta.story({
   args: {
     clear: true,
   },
-}
+})
 
-export const Icon: Story = {
+export const Icon = meta.story({
   args: {
     icon: 'cart',
     'aria-label': 'cart',
   },
-}
+})
 
-export const IconAndText: Story = {
+export const IconAndText = meta.story({
   args: {
     icon: 'cart',
     children: (
@@ -55,4 +52,4 @@ export const IconAndText: Story = {
       </div>
     ),
   },
-}
+})
diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
index 97bfa15b..de50a11c 100644
--- a/src/components/Button/Button.test.tsx
+++ b/src/components/Button/Button.test.tsx
@@ -1,11 +1,9 @@
 import { vi, expect, test } from 'vitest'
 import { axe } from 'vitest-axe'
-import { screen } from '@testing-library/react'
-import { composeStories } from '@storybook/react-vite'
+import { render, screen } from '@testing-library/react'
 
-import * as stories from './Button.stories'
+import { Default, Disabled } from './Button.stories'
 
-const { Default, Disabled } = composeStories(stories)
 test('renders button with custom children', async () => {
   await Default.run()
   expect(screen.getByText(/Button/i)).toBeInTheDocument()
@@ -15,7 +13,7 @@ test('renders button with custom children', async () => {
 
 test('onclick handler is called', async () => {
   const onClickSpy = vi.fn()
-  await Default.run({ args: { ...Default.args, onClick: onClickSpy } })
+  await Default.run({ args: { onClick: onClickSpy } })
   const buttonElement = screen.getByRole('button')
   buttonElement.click()
   expect(onClickSpy).toHaveBeenCalled()
@@ -23,22 +21,22 @@ test('onclick handler is called', async () => {
 
 test('onclick handler is not called when disabled', async () => {
   const onClickSpy = vi.fn()
-  await Disabled.run({ args: { ...Disabled.args, onClick: onClickSpy } })
+  await Disabled.run({ args: { ...Disabled.input.args, onClick: onClickSpy } })
   screen.getByRole('button').click()
   expect(onClickSpy).not.toHaveBeenCalled()
 })
 
-// test('onclick handler is called', async () => {
-//   const onClickSpy = vi.fn()
-//   render(<Default onClick={onClickSpy} />)
-//   const buttonElement = screen.getByRole('button')
-//   buttonElement.click()
-//   expect(onClickSpy).toHaveBeenCalled()
-// })
+test('onclick handler is called', async () => {
+  const onClickSpy = vi.fn()
+  render(<Default.Component onClick={onClickSpy} />)
+  const buttonElement = screen.getByRole('button')
+  buttonElement.click()
+  expect(onClickSpy).toHaveBeenCalled()
+})
 
-// test('onclick handler is not called when disabled', async () => {
-//   const onClickSpy = vi.fn()
-//   render(<Disabled onClick={onClickSpy} />)
-//   screen.getByRole('button').click()
-//   expect(onClickSpy).not.toHaveBeenCalled()
-// })
+test('onclick handler is not called when disabled', async () => {
+  const onClickSpy = vi.fn()
+  render(<Disabled.Component onClick={onClickSpy} />)
+  screen.getByRole('button').click()
+  expect(onClickSpy).not.toHaveBeenCalled()
+})
diff --git a/src/components/Category/Category.stories.tsx b/src/components/Category/Category.stories.tsx
index c499d2d9..06d0ef92 100644
--- a/src/components/Category/Category.stories.tsx
+++ b/src/components/Category/Category.stories.tsx
@@ -1,8 +1,8 @@
-import type { StoryObj, Meta } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { Category } from './Category'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Category',
   component: Category,
   args: {
@@ -17,15 +17,12 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1145-3681&mode=design&t=zmyrZnTzOLfLqBwr-4',
     },
   },
-} satisfies Meta<typeof Category>
-export default meta
+})
 
-type Story = StoryObj<typeof meta>
+export const Default = meta.story()
 
-export const Default: Story = {}
-
-export const Rounded: Story = {
+export const Rounded = meta.story({
   args: {
     round: true,
   },
-}
+})
diff --git a/src/components/ErrorBlock/ErrorBlock.stories.tsx b/src/components/ErrorBlock/ErrorBlock.stories.tsx
index 15bc55fe..0918bea0 100644
--- a/src/components/ErrorBlock/ErrorBlock.stories.tsx
+++ b/src/components/ErrorBlock/ErrorBlock.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 import { fn } from 'storybook/test'
 
 import sushi from '../../assets/images/sushi.svg'
@@ -6,7 +6,7 @@ import { AnimatedIllustration } from '../AnimatedIllustration'
 
 import { ErrorBlock } from './ErrorBlock'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/ErrorBlock',
   component: ErrorBlock,
   parameters: {
@@ -20,19 +20,16 @@ const meta = {
     */
     onButtonClick: fn(),
   },
-} satisfies Meta<typeof ErrorBlock>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   args: {
     title: 'This is not the food you’re looking for.',
     body: 'There seems that there are no restaurants in this category yet. Try to come back later?',
     image: <img alt="no restaurants found" src={sushi} />,
     buttonText: 'See all restaurants',
   },
-}
+})
 
 /* export const Error500: Story = {
   args: {
@@ -43,11 +40,11 @@ export const Default: Story = {
   },
 } */
 
-export const Error404: Story = {
+export const Error404 = meta.story({
   args: {
     title: "We can't find this page",
     body: 'This page doesn’t exist, keep looking.',
     image: <AnimatedIllustration animation="NotFound" />,
     buttonText: 'Home',
   },
-}
+})
diff --git a/src/components/Footer/Footer.stories.tsx b/src/components/Footer/Footer.stories.tsx
index 828e1210..0cad8074 100644
--- a/src/components/Footer/Footer.stories.tsx
+++ b/src/components/Footer/Footer.stories.tsx
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { Footer } from './Footer'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Footer',
   component: Footer,
   parameters: {
@@ -12,9 +12,6 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1716-3158&mode=design&t=zmyrZnTzOLfLqBwr-4',
     },
   },
-} satisfies Meta<typeof Footer>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}
+export const Default = meta.story()
diff --git a/src/components/Header/Header.stories.tsx b/src/components/Header/Header.stories.tsx
index 2c5687aa..c15d4340 100644
--- a/src/components/Header/Header.stories.tsx
+++ b/src/components/Header/Header.stories.tsx
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { Header } from './Header'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Header',
   component: Header,
   parameters: {
@@ -12,14 +12,11 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1690-4054&mode=design&t=zmyrZnTzOLfLqBwr-4',
     },
   },
-} satisfies Meta<typeof Header>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
+export const Default = meta.story()
 
-export const Default: Story = {}
-
-export const WithCartData: Story = {
+export const WithCartData = meta.story({
   parameters: {
     store: {
       initialState: {
@@ -45,4 +42,4 @@ export const WithCartData: Story = {
       },
     },
   },
-}
+})
diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx
index 37148c94..649ab8d4 100644
--- a/src/components/Icon/Icon.stories.tsx
+++ b/src/components/Icon/Icon.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 import styled, { css } from 'styled-components'
 
 import { Body } from '../typography/Body'
@@ -37,7 +37,7 @@ const IconContainer = styled.div(
   `
 )
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Icon',
   component: Icon,
   argTypes: {
@@ -53,12 +53,9 @@ const meta = {
       },
     },
   },
-} satisfies Meta<typeof Icon>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const AllIcons: StoryObj = {
+export const AllIcons = meta.story({
   render: () => (
     <>
       <IconContainer>
@@ -73,11 +70,11 @@ export const AllIcons: StoryObj = {
       </IconContainer>
     </>
   ),
-}
+})
 
-export const Playground: Story = {
+export const Playground = meta.story({
   args: {
     name: 'cart',
     size: 24,
   },
-}
+})
diff --git a/src/components/IconButton/IconButton.stories.tsx b/src/components/IconButton/IconButton.stories.tsx
index 3f872a1d..136b13a8 100644
--- a/src/components/IconButton/IconButton.stories.tsx
+++ b/src/components/IconButton/IconButton.stories.tsx
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { IconButton } from './IconButton'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/IconButton',
   component: IconButton,
   parameters: {
@@ -11,22 +11,14 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1131-437&mode=design&t=zmyrZnTzOLfLqBwr-4',
     },
   },
-} satisfies Meta<typeof IconButton>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   args: {
     name: 'arrow-right',
     small: false,
     'aria-label': 'forward',
   },
-}
+})
 
-export const Small: Story = {
-  args: {
-    ...Default.args,
-    small: true,
-  },
-}
+export const Small = Default.extend({ args: { small: true } })
diff --git a/src/components/Logo/Logo.stories.tsx b/src/components/Logo/Logo.stories.tsx
index f214b457..c14d8330 100644
--- a/src/components/Logo/Logo.stories.tsx
+++ b/src/components/Logo/Logo.stories.tsx
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { Logo } from './Logo'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Logo',
   component: Logo,
   parameters: {
@@ -11,16 +11,13 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1145-4821&mode=design&t=zmyrZnTzOLfLqBwr-4',
     },
   },
-} satisfies Meta<typeof Logo>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
+export const WithText = meta.story()
 
-export const WithText: Story = {}
-
-export const LogoOnly: Story = {
+export const LogoOnly = meta.story({
   args: {
     large: true,
     logoOnly: true,
   },
-}
+})
diff --git a/src/components/Modal/Modal.stories.tsx b/src/components/Modal/Modal.stories.tsx
index b30592d2..84c31e51 100644
--- a/src/components/Modal/Modal.stories.tsx
+++ b/src/components/Modal/Modal.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 import { useEffect, useState } from 'react'
 import { fn } from 'storybook/test'
 
@@ -7,13 +7,18 @@ import { Body } from '../typography'
 
 import { Modal } from './Modal'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Modal',
   component: Modal,
   parameters: {
     // This makes it so that the modal is loaded inside of an iframe in docs mode.
     // If it's not rendered in an iframe, the modal is going to open on top of Storybook itself!
-    docs: { inlineStories: false, iframeHeight: 600 },
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: '600px',
+      },
+    },
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1138-3227&mode=design&t=zmyrZnTzOLfLqBwr-4',
@@ -29,10 +34,10 @@ const meta = {
   ],
   args: {
     isOpen: false,
-    /* 
+    /*
     The following line emulates the event handler that would be passed to the component
     Read more about the `fn` utility function at
-    https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function 
+    https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function
     */
     onClose: fn(),
   },
@@ -60,17 +65,17 @@ const meta = {
       </>
     )
   },
-} satisfies Meta<typeof Modal>
-
-export default meta
-type Story = StoryObj<typeof meta>
+})
 
-export const Desktop: Story = {}
+export const Desktop = meta.story({})
 
-export const Mobile: Story = {
-  parameters: {
+export const Mobile = meta.story({
+  globals: {
+    a11y: {
+      manual: true,
+    },
     viewport: {
-      defaultViewport: 'iphonex',
+      value: 'iphonex',
     },
   },
-}
+})
diff --git a/src/components/PageSection/PageSection.stories.tsx b/src/components/PageSection/PageSection.stories.tsx
index 5752907f..7ae4f1a7 100644
--- a/src/components/PageSection/PageSection.stories.tsx
+++ b/src/components/PageSection/PageSection.stories.tsx
@@ -1,28 +1,20 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { PageSection } from './PageSection'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/PageSection',
   component: PageSection,
   parameters: {
     layout: 'fullscreen',
   },
-} satisfies Meta<typeof PageSection>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   args: {
     title: 'Asian',
     children: <h1>Hello Dummy Content</h1>,
   },
-}
+})
 
-export const WithButtons: Story = {
-  args: {
-    ...Default.args,
-    title: 'Asian',
-  },
-}
+export const WithButtons = Default.extend({ args: { title: 'Asian' } })
diff --git a/src/components/RestaurantCard/RestaurantCard.stories.tsx b/src/components/RestaurantCard/RestaurantCard.stories.tsx
index 09285f4c..eeaa4e7f 100644
--- a/src/components/RestaurantCard/RestaurantCard.stories.tsx
+++ b/src/components/RestaurantCard/RestaurantCard.stories.tsx
@@ -1,11 +1,11 @@
+import preview from '#.storybook/preview'
 import { expect } from 'storybook/test'
-import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import { restaurants } from '../../stub/restaurants'
 
 import { RestaurantCard } from './RestaurantCard'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/RestaurantCard',
   component: RestaurantCard,
   parameters: {
@@ -14,39 +14,24 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1091-2986&mode=design&t=PGeoMU7t8HOFToQL-4',
     },
   },
-} satisfies Meta<typeof RestaurantCard>
+})
 
-export default meta
-
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   args: {
     ...restaurants[0],
     name: 'Burger Kingdom',
   },
-}
+})
 
-export const New: Story = {
-  args: {
-    ...Default.args,
-    isNew: true,
-  },
-}
+export const New = Default.extend({ args: { isNew: true } })
 
-export const Closed: Story = {
-  args: {
-    ...Default.args,
-    isClosed: true,
-  },
+export const Closed = Default.extend({
+  args: { isClosed: true },
   play: async ({ canvas }) => {
     await expect(canvas.getByText('This restaurant is closed.')).toBeInTheDocument()
   },
-}
+})
 
-export const Loading: Story = {
-  args: {
-    ...Default.args,
-    isLoading: true,
-  },
-}
+export const Loading = Default.extend({
+  args: { isLoading: true },
+})
diff --git a/src/components/RestaurantCard/RestaurantCard.test.tsx b/src/components/RestaurantCard/RestaurantCard.test.tsx
index 429675d4..2ed16030 100644
--- a/src/components/RestaurantCard/RestaurantCard.test.tsx
+++ b/src/components/RestaurantCard/RestaurantCard.test.tsx
@@ -1,11 +1,8 @@
 import { vi, expect, describe, test } from 'vitest'
 import { screen } from '@testing-library/react'
-import { composeStories } from '@storybook/react-vite'
 import { axe } from 'vitest-axe'
 
-import * as stories from './RestaurantCard.stories'
-
-const { Default, Loading, New, Closed } = composeStories(stories)
+import { Default, Loading, New, Closed } from './RestaurantCard.stories'
 
 describe('RestaurantCard', () => {
   test('should render correctly', async () => {
@@ -26,7 +23,7 @@ describe('RestaurantCard', () => {
 
   test('should not trigger onclick when restaurant is closed', async () => {
     const onClickSpy = vi.fn()
-    await Closed.run({ args: { ...Closed.args, onClick: onClickSpy } })
+    await Closed.run({ args: { ...Closed.input.args, onClick: onClickSpy } })
 
     // display closed message
     expect(screen.getByText('This restaurant is closed.')).toBeInTheDocument()
@@ -38,11 +35,7 @@ describe('RestaurantCard', () => {
 })
 
 // Go through every story from composeStories and create a map of StoryName <-> StoryComponent
-const testCases = Object.values(composeStories(stories)).map((Story) => [
-  // The ! is necessary in Typescript only, as the property is part of a partial type
-  Story.storyName!,
-  Story,
-])
+const testCases = Object.entries({ Default, Loading, New, Closed });
 
 // Go through all test cases to batch test accessibility
 test.each(testCases)('%s story should be accessible', async (_storyName, Story) => {
diff --git a/src/components/Review/Review.stories.tsx b/src/components/Review/Review.stories.tsx
index 18e33d94..29c6b839 100644
--- a/src/components/Review/Review.stories.tsx
+++ b/src/components/Review/Review.stories.tsx
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { Review } from './Review'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Review',
   component: Review,
   argTypes: {
@@ -21,33 +21,30 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1128-3434&mode=design&t=zmyrZnTzOLfLqBwr-4',
     },
   },
-} satisfies Meta<typeof Review>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
+export const Default = meta.story()
 
-export const Default: Story = {}
-
-export const Excellent: Story = {
+export const Excellent = meta.story({
   args: {
     rating: 5,
   },
-}
+})
 
-export const VeryGood: Story = {
+export const VeryGood = meta.story({
   args: {
     rating: 4.3,
   },
-}
+})
 
-export const Adequate: Story = {
+export const Adequate = meta.story({
   args: {
     rating: 2.5,
   },
-}
+})
 
-export const Poor: Story = {
+export const Poor = meta.story({
   args: {
     rating: 1.5,
   },
-}
+})
diff --git a/src/components/ShoppingCart/OrderSummary/OrderSummary.stories.tsx b/src/components/ShoppingCart/OrderSummary/OrderSummary.stories.tsx
index 98c54945..5b66b8f4 100644
--- a/src/components/ShoppingCart/OrderSummary/OrderSummary.stories.tsx
+++ b/src/components/ShoppingCart/OrderSummary/OrderSummary.stories.tsx
@@ -1,19 +1,16 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { cartItems } from '../../../stub/cart-items'
 
 import { OrderSummary } from './OrderSummary'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/OrderSummary',
   component: OrderSummary,
-} satisfies Meta<typeof OrderSummary>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   args: {
     cartItems,
   },
-}
+})
diff --git a/src/components/ShoppingCartMenu/ShoppingCartMenu.stories.tsx b/src/components/ShoppingCartMenu/ShoppingCartMenu.stories.tsx
index 6c271966..9de233bc 100644
--- a/src/components/ShoppingCartMenu/ShoppingCartMenu.stories.tsx
+++ b/src/components/ShoppingCartMenu/ShoppingCartMenu.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 import { useEffect, useState } from 'react'
 import { fn } from 'storybook/test'
 
@@ -8,49 +8,51 @@ import { Body } from '../typography'
 
 import { ShoppingCartMenu } from './ShoppingCartMenu'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/ShoppingCartMenu',
   component: ShoppingCartMenu,
   parameters: {
     // This makes it so that the modal is loaded inside of an iframe in docs mode.
     // If it's not rendered in an iframe, the modal is going to open on top of Storybook itself!
-    docs: { inlineStories: false, iframeHeight: 600 },
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: '600px',
+      },
+    },
   },
   args: {
     isOpen: true,
     cartItems: cartItems,
     totalPrice: 1200,
-    /* 
+    /*
     The following lines emulate the event handlers that would be passed to the component
     Read more about the `fn` utility function at
-    https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function 
+    https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function
     */
     onClose: fn(),
     onItemChange: fn(),
   },
-} satisfies Meta<typeof ShoppingCartMenu>
-
-export default meta
-type Story = StoryObj<typeof meta>
+})
 
-export const Empty: Story = {
+export const Empty = meta.story({
   args: {
     cartItems: [],
     totalPrice: 0,
   },
-}
+})
 
-export const WithItems: Story = {}
+export const WithItems = meta.story()
 
-export const Mobile: Story = {
-  parameters: {
+export const Mobile = meta.story({
+  globals: {
     viewport: {
-      defaultViewport: 'iphonex',
+      value: 'iphonex',
     },
   },
-}
+})
 
-export const Playground: Story = {
+export const Playground = meta.story({
   render: () => {
     const [isOpen, setIsOpen] = useState(false)
     const openShoppingCartMenu = () => setIsOpen(true)
@@ -76,4 +78,4 @@ export const Playground: Story = {
       </>
     )
   },
-}
+})
diff --git a/src/components/Sidebar/Sidebar.stories.tsx b/src/components/Sidebar/Sidebar.stories.tsx
index 3015d5a4..a9c7f1b0 100644
--- a/src/components/Sidebar/Sidebar.stories.tsx
+++ b/src/components/Sidebar/Sidebar.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 import { useEffect, useState } from 'react'
 import { fn } from 'storybook/test'
 
@@ -7,13 +7,18 @@ import { Body } from '../typography'
 
 import { Sidebar } from './Sidebar'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Sidebar',
   component: Sidebar,
   parameters: {
     // This makes it so that the sidebar is loaded inside of an iframe in docs mode.
     // If it's not rendered in an iframe, the sidebar is going to open on top of Storybook itself!
-    docs: { inlineStories: false, iframeHeight: 600 },
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: '600px',
+      },
+    },
     design: {
       type: 'figma',
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1714-3811&mode=design&t=zmyrZnTzOLfLqBwr-4',
@@ -22,10 +27,10 @@ const meta = {
   args: {
     isOpen: false,
     title: '',
-    /* 
+    /*
     The following line emulates the event handler that would be passed to the component
     Read more about the `fn` utility function at
-    https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function 
+    https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function
     */
     onClose: fn(),
   },
@@ -54,17 +59,14 @@ const meta = {
       </>
     )
   },
-} satisfies Meta<typeof Sidebar>
-
-export default meta
-type Story = StoryObj<typeof meta>
+})
 
-export const Desktop: Story = {}
+export const Desktop = meta.story()
 
-export const Mobile: Story = {
-  parameters: {
+export const Mobile = meta.story({
+  globals: {
     viewport: {
-      defaultViewport: 'iphonex',
+      value: 'iphonex',
     },
   },
-}
+})
diff --git a/src/components/Spinner/Spinner.stories.tsx b/src/components/Spinner/Spinner.stories.tsx
index 63601f66..6af831aa 100644
--- a/src/components/Spinner/Spinner.stories.tsx
+++ b/src/components/Spinner/Spinner.stories.tsx
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { Spinner } from './Spinner'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Spinner',
   component: Spinner,
   parameters: {
@@ -13,15 +13,12 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=12703-2132&mode=design&t=PGeoMU7t8HOFToQL-4',
     },
   },
-} satisfies Meta<typeof Spinner>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   render: () => (
     <div style={{ minHeight: '100vh' }}>
       <Spinner />
     </div>
   ),
-}
+})
diff --git a/src/components/TopBanner/TopBanner.stories.tsx b/src/components/TopBanner/TopBanner.stories.tsx
index a9f8e496..666fb9ff 100644
--- a/src/components/TopBanner/TopBanner.stories.tsx
+++ b/src/components/TopBanner/TopBanner.stories.tsx
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { TopBanner } from './TopBanner'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/TopBanner',
   component: TopBanner,
   parameters: {
@@ -12,21 +12,17 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1690-5067&mode=design&t=zmyrZnTzOLfLqBwr-4',
     },
   },
-} satisfies Meta<typeof TopBanner>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   args: {
     title: 'Categories',
   },
-}
+})
 
-export const WithImage: Story = {
+export const WithImage = Default.extend({
   args: {
-    ...Default.args,
     photoUrl:
       'https://images.unsplash.com/photo-1426869981800-95ebf51ce900?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=20',
   },
-}
+})
diff --git a/src/components/forms/Input.stories.tsx b/src/components/forms/Input.stories.tsx
index 8708019c..8ca7f048 100644
--- a/src/components/forms/Input.stories.tsx
+++ b/src/components/forms/Input.stories.tsx
@@ -1,9 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { Input } from './Input'
 import { fn } from 'storybook/test'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Form/Input',
   component: Input,
   args: {
@@ -15,43 +15,30 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1126-3572&mode=design&t=zmyrZnTzOLfLqBwr-4',
     },
   },
-} satisfies Meta<typeof Input>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   args: {
     'aria-label': 'input',
   },
-}
+})
 
-export const WithLabel: Story = {
+export const WithLabel = meta.story({
   args: {
     id: 'input',
     label: 'Input field',
   },
-}
+})
 
-export const WithHint: Story = {
-  args: {
-    ...WithLabel.args,
-    placeholder: 'This is a hint',
-  },
-}
+export const WithHint = WithLabel.extend({ args: { placeholder: 'This is a hint' } })
 
-export const Filled: Story = {
-  args: {
-    ...WithLabel.args,
-    value: 'Already filled text',
-  },
-}
+export const Filled = WithLabel.extend({ args: { value: 'Already filled text' } })
 
-export const ErrorValidation: Story = {
+export const ErrorValidation = meta.story({
   args: {
     id: 'input',
     label: 'Input field',
     value: 'jane@doecom',
     error: 'email should be valid',
   },
-}
+})
diff --git a/src/components/forms/Select.stories.tsx b/src/components/forms/Select.stories.tsx
index abe7f510..056adc77 100644
--- a/src/components/forms/Select.stories.tsx
+++ b/src/components/forms/Select.stories.tsx
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { Select } from './Select'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Form/Select',
   component: Select,
   parameters: {
@@ -11,23 +11,21 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1145-3229&mode=design&t=zmyrZnTzOLfLqBwr-4',
     },
   },
-} satisfies Meta<typeof Select>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+const Default = meta.story({
   args: {
     options: ['Burger', 'Pizza', 'Sushi'],
     id: 'select',
     'aria-label': 'food',
   },
-}
+})
+
 
-export const WithLabel: Story = {
+export const WithLabel = meta.story({
   args: {
-    ...Default.args,
+    ...Default.input.args,
     id: 'select',
     label: 'Select field',
   },
-}
+})
diff --git a/src/components/typography/Body.stories.tsx b/src/components/typography/Body.stories.tsx
index c4b19f02..860a04e9 100644
--- a/src/components/typography/Body.stories.tsx
+++ b/src/components/typography/Body.stories.tsx
@@ -1,20 +1,17 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { Body } from './Body'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Typography/Body',
   component: Body,
   argTypes: {
     children: { controls: 'text' },
     size: { table: { disable: true } },
   },
-} satisfies Meta<typeof Body>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   args: {
     children: '',
   },
@@ -26,4 +23,4 @@ export const Default: Story = {
       <Body size="XXS">{children || 'Body XXS'}</Body>
     </div>
   ),
-}
+})
diff --git a/src/components/typography/Heading.stories.tsx b/src/components/typography/Heading.stories.tsx
index 908d118a..e50bdd3a 100644
--- a/src/components/typography/Heading.stories.tsx
+++ b/src/components/typography/Heading.stories.tsx
@@ -1,20 +1,17 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { Heading } from './Heading'
 
-const meta = {
+const meta = preview.meta({
   title: 'Components/Typography/Heading',
   component: Heading,
   argTypes: {
     children: { controls: 'text' },
     level: { table: { disable: true } },
   },
-} satisfies Meta<typeof Heading>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   args: {
     children: '',
   },
@@ -26,4 +23,4 @@ export const Default: Story = {
       <Heading level={4}>{children || 'Heading 4'}</Heading>
     </div>
   ),
-}
+})
diff --git a/src/pages/CategoryDetailPage/CategoryDetailPage.stories.tsx b/src/pages/CategoryDetailPage/CategoryDetailPage.stories.tsx
index b98d0da3..29c92171 100644
--- a/src/pages/CategoryDetailPage/CategoryDetailPage.stories.tsx
+++ b/src/pages/CategoryDetailPage/CategoryDetailPage.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 import { http, delay, HttpResponse } from 'msw'
 
 import { restaurants } from '../../stub/restaurants'
@@ -7,7 +7,7 @@ import { withDeeplink } from '../../../.storybook/withDeeplink'
 
 import { CategoryDetailPage } from './CategoryDetailPage'
 
-const meta = {
+const meta = preview.meta({
   title: 'Pages/CategoryDetailPage',
   component: CategoryDetailPage,
   parameters: {
@@ -19,20 +19,17 @@ const meta = {
     },
   },
   decorators: [withDeeplink],
-} satisfies Meta<typeof CategoryDetailPage>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   parameters: {
     msw: {
       handlers: [http.get(BASE_URL, () => HttpResponse.json([restaurants[0]]))],
     },
   },
-}
+})
 
-export const Loading: Story = {
+export const Loading = meta.story({
   parameters: {
     msw: {
       handlers: [
@@ -42,9 +39,9 @@ export const Loading: Story = {
       ],
     },
   },
-}
+})
 
-export const Missing: Story = {
+export const Missing = meta.story({
   parameters: {
     deeplink: { route: '/categories/wrong', path: '/categories/:id' },
     msw: {
@@ -55,4 +52,4 @@ export const Missing: Story = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=426-1402&mode=design&t=PGeoMU7t8HOFToQL-4',
     },
   },
-}
+})
diff --git a/src/pages/CategoryListPage/CategoryListPage.stories.tsx b/src/pages/CategoryListPage/CategoryListPage.stories.tsx
index 764eca82..74fd174b 100644
--- a/src/pages/CategoryListPage/CategoryListPage.stories.tsx
+++ b/src/pages/CategoryListPage/CategoryListPage.stories.tsx
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { CategoryListPage } from './CategoryListPage'
 
-const meta = {
+const meta = preview.meta({
   title: 'Pages/CategoryListPage',
   component: CategoryListPage,
   parameters: {
@@ -12,9 +12,6 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=169-365&mode=design&t=PGeoMU7t8HOFToQL-4',
     },
   },
-} satisfies Meta<typeof CategoryListPage>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}
+export const Default = meta.story()
diff --git a/src/pages/CategoryListPage/components/CategoryList/CategoryList.stories.tsx b/src/pages/CategoryListPage/components/CategoryList/CategoryList.stories.tsx
index a4f92df4..19d2353e 100644
--- a/src/pages/CategoryListPage/components/CategoryList/CategoryList.stories.tsx
+++ b/src/pages/CategoryListPage/components/CategoryList/CategoryList.stories.tsx
@@ -1,19 +1,16 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { categories } from '../../../../stub/categories'
 
 import { CategoryList } from './CategoryList'
 
-const meta = {
+const meta = preview.meta({
   title: 'Pages/CategoryListPage/Components/CategoryList',
   component: CategoryList,
-} satisfies Meta<typeof CategoryList>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   args: {
     categories,
   },
-}
+})
diff --git a/src/pages/CheckoutPage/CheckoutPage.stories.tsx b/src/pages/CheckoutPage/CheckoutPage.stories.tsx
index 17c227ec..c0840117 100644
--- a/src/pages/CheckoutPage/CheckoutPage.stories.tsx
+++ b/src/pages/CheckoutPage/CheckoutPage.stories.tsx
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { CheckoutPage } from './CheckoutPage'
 
-const meta = {
+const meta = preview.meta({
   title: 'Pages/CheckoutPage',
   component: CheckoutPage,
   parameters: {
@@ -12,14 +12,11 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=426-3291&mode=design&t=PGeoMU7t8HOFToQL-4',
     },
   },
-} satisfies Meta<typeof CheckoutPage>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
+export const Empty = meta.story()
 
-export const Empty: Story = {}
-
-export const WithItems: Story = {
+export const WithItems = meta.story({
   parameters: {
     store: {
       initialState: {
@@ -45,4 +42,4 @@ export const WithItems: Story = {
       },
     },
   },
-}
+})
diff --git a/src/pages/CheckoutPage/components/registration-form/MultiStepForm.stories.tsx b/src/pages/CheckoutPage/components/registration-form/MultiStepForm.stories.tsx
index b603ad45..f230b368 100644
--- a/src/pages/CheckoutPage/components/registration-form/MultiStepForm.stories.tsx
+++ b/src/pages/CheckoutPage/components/registration-form/MultiStepForm.stories.tsx
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { MultiStepForm } from './MultiStepForm'
 
-const meta = {
+const meta = preview.meta({
   title: 'Pages/CheckoutPage/Components/MultiStepForm',
   component: MultiStepForm,
   parameters: {
@@ -11,9 +11,6 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=426-3309&mode=design&t=PGeoMU7t8HOFToQL-4',
     },
   },
-} satisfies Meta<typeof MultiStepForm>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}
+export const Default = meta.story()
diff --git a/src/pages/CheckoutPage/components/registration-form/StepIndicator.stories.tsx b/src/pages/CheckoutPage/components/registration-form/StepIndicator.stories.tsx
index 82209eda..c050749f 100644
--- a/src/pages/CheckoutPage/components/registration-form/StepIndicator.stories.tsx
+++ b/src/pages/CheckoutPage/components/registration-form/StepIndicator.stories.tsx
@@ -1,19 +1,16 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { StepIndicator } from './StepIndicator'
 
-const meta = {
+const meta = preview.meta({
   title: 'Pages/CheckoutPage/Components/StepIndicator',
   component: StepIndicator,
-} satisfies Meta<typeof StepIndicator>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   args: {
     title: 'Step',
     amountOfSteps: 4,
     currentStep: 1,
   },
-}
+})
diff --git a/src/pages/HomePage/HomePage.stories.tsx b/src/pages/HomePage/HomePage.stories.tsx
index 529f1fcc..2faa0034 100644
--- a/src/pages/HomePage/HomePage.stories.tsx
+++ b/src/pages/HomePage/HomePage.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 import { http, HttpResponse } from 'msw'
 
 import { BASE_URL } from '../../api'
@@ -6,7 +6,7 @@ import { restaurantsCompleteData } from '../../stub/restaurants'
 
 import { HomePage } from './HomePage'
 
-const meta = {
+const meta = preview.meta({
   title: 'Pages/HomePage',
   component: HomePage,
   parameters: {
@@ -19,9 +19,6 @@ const meta = {
       handlers: [http.get(BASE_URL, () => HttpResponse.json(restaurantsCompleteData))],
     },
   },
-} satisfies Meta<typeof HomePage>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}
+export const Default = meta.story()
diff --git a/src/pages/HomePage/components/AwardWinningSection/AwardWinningSection.stories.tsx b/src/pages/HomePage/components/AwardWinningSection/AwardWinningSection.stories.tsx
index fda78a49..c70171d2 100644
--- a/src/pages/HomePage/components/AwardWinningSection/AwardWinningSection.stories.tsx
+++ b/src/pages/HomePage/components/AwardWinningSection/AwardWinningSection.stories.tsx
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { AwardWinningSection } from './AwardWinningSection'
 
-const meta = {
+const meta = preview.meta({
   title: 'Pages/HomePage/Components/AwardWinningSection',
   component: AwardWinningSection,
   parameters: {
@@ -12,9 +12,6 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1682-4910&mode=design&t=PGeoMU7t8HOFToQL-4',
     },
   },
-} satisfies Meta<typeof AwardWinningSection>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}
+export const Default = meta.story()
diff --git a/src/pages/HomePage/components/Banner/Banner.stories.tsx b/src/pages/HomePage/components/Banner/Banner.stories.tsx
index 590c454b..7cb4c246 100644
--- a/src/pages/HomePage/components/Banner/Banner.stories.tsx
+++ b/src/pages/HomePage/components/Banner/Banner.stories.tsx
@@ -1,8 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { Banner } from './Banner'
 
-const meta = {
+const meta = preview.meta({
   title: 'Pages/HomePage/Components/Banner',
   component: Banner,
   parameters: {
@@ -12,17 +12,14 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?type=design&node-id=1690-5067&mode=design&t=PGeoMU7t8HOFToQL-4',
     },
   },
-} satisfies Meta<typeof Banner>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
+export const Desktop = meta.story()
 
-export const Desktop: Story = {}
-
-export const Mobile: Story = {
-  parameters: {
+export const Mobile = meta.story({
+  globals: {
     viewport: {
-      defaultViewport: 'iphonex',
+      value: 'iphonex',
     },
   },
-}
+})
diff --git a/src/pages/HomePage/components/CategoriesSection/CategoriesSection.stories.tsx b/src/pages/HomePage/components/CategoriesSection/CategoriesSection.stories.tsx
index 795493bf..ba554202 100644
--- a/src/pages/HomePage/components/CategoriesSection/CategoriesSection.stories.tsx
+++ b/src/pages/HomePage/components/CategoriesSection/CategoriesSection.stories.tsx
@@ -1,18 +1,15 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { categories } from '../../../../stub/categories'
 
 import { CategoriesSection } from './CategoriesSection'
 
-const meta = {
+const meta = preview.meta({
   title: 'Pages/HomePage/Components/CategoriesSection',
   component: CategoriesSection,
   args: {
     categories,
   },
-} satisfies Meta<typeof CategoriesSection>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {}
+export const Default = meta.story()
diff --git a/src/pages/HomePage/components/RestaurantsSection/RestaurantsSection.stories.tsx b/src/pages/HomePage/components/RestaurantsSection/RestaurantsSection.stories.tsx
index d7dcf3ae..36fea025 100644
--- a/src/pages/HomePage/components/RestaurantsSection/RestaurantsSection.stories.tsx
+++ b/src/pages/HomePage/components/RestaurantsSection/RestaurantsSection.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 import { delay, HttpResponse, http } from 'msw'
 
 import { BASE_URL } from '../../../../api'
@@ -6,15 +6,12 @@ import { restaurantsCompleteData } from '../../../../stub/restaurants'
 
 import { RestaurantsSection } from './RestaurantsSection'
 
-const meta = {
+const meta = preview.meta({
   title: 'Pages/HomePage/Components/RestaurantsSection',
   component: RestaurantsSection,
-} satisfies Meta<typeof RestaurantsSection>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   args: {
     title: 'Our favorite picks',
   },
@@ -23,12 +20,9 @@ export const Default: Story = {
       handlers: [http.get(BASE_URL, () => HttpResponse.json(restaurantsCompleteData))],
     },
   },
-}
+})
 
-export const Loading: Story = {
-  args: {
-    ...Default.args,
-  },
+export const Loading = Default.extend({
   parameters: {
     msw: {
       handlers: [
@@ -38,4 +32,4 @@ export const Loading: Story = {
       ],
     },
   },
-}
+})
diff --git a/src/pages/RestaurantDetailPage/RestaurantDetailPage.stories.tsx b/src/pages/RestaurantDetailPage/RestaurantDetailPage.stories.tsx
index d34a4995..652639e6 100644
--- a/src/pages/RestaurantDetailPage/RestaurantDetailPage.stories.tsx
+++ b/src/pages/RestaurantDetailPage/RestaurantDetailPage.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 import { http, HttpResponse, delay } from 'msw'
 import { expect } from 'storybook/test'
 
@@ -9,7 +9,7 @@ import { withDeeplink } from '../../../.storybook/withDeeplink'
 
 import { RestaurantDetailPage } from './RestaurantDetailPage'
 
-const meta = {
+const meta = preview.meta({
   title: 'Pages/RestaurantDetailPage',
   component: RestaurantDetailPage,
   decorators: [withDeeplink],
@@ -35,37 +35,34 @@ const meta = {
       </>
     )
   },
-} satisfies Meta<typeof RestaurantDetailPage>
-export default meta
+})
 
-type Story = StoryObj<typeof meta>
-
-export const Success = {
+export const Success = meta.story({
   play: async ({ canvas }) => {
     const item = await canvas.findByText(/Burger Kingdom/i)
     await expect(item).toBeInTheDocument()
   },
-} satisfies Story
+})
 
-export const WithModalOpen: Story = {
-  ...Success,
+export const WithModalOpen = meta.story({
+  ...Success.input,
   play: async (context) => {
-    await Success.play(context)
+    await Success.input.play(context)
     const item = await context.canvas.findByText(/Cheeseburger/i)
     await context.userEvent.click(item)
     await expect(context.canvas.getByTestId('modal')).toBeInTheDocument()
   },
-}
+})
 
-export const WithItemsInTheCart: Story = {
+export const WithItemsInTheCart = meta.story({
   parameters: {
     store: {
       initialState: { cart: { items: cartItems } },
     },
   },
-}
+})
 
-export const Loading: Story = {
+export const Loading = meta.story({
   parameters: {
     design: {
       type: 'figma',
@@ -83,9 +80,9 @@ export const Loading: Story = {
     const item = await canvas.findByText(/Looking for some food.../i)
     await expect(item).toBeInTheDocument()
   },
-}
+})
 
-export const NotFound: Story = {
+export const NotFound = meta.story({
   parameters: {
     design: {
       type: 'figma',
@@ -103,9 +100,9 @@ export const NotFound: Story = {
     const item = await canvas.findByText(/We can't find this page/i)
     await expect(item).toBeInTheDocument()
   },
-}
+})
 
-export const Error: Story = {
+export const Error = meta.story({
   parameters: {
     design: {
       type: 'figma',
@@ -125,4 +122,4 @@ export const Error: Story = {
       await expect(item).toBeInTheDocument()
     })
   },
-}
+})
diff --git a/src/pages/RestaurantDetailPage/RestaurantDetailPage.test.tsx b/src/pages/RestaurantDetailPage/RestaurantDetailPage.test.tsx
index 27c8783a..fdcaa439 100644
--- a/src/pages/RestaurantDetailPage/RestaurantDetailPage.test.tsx
+++ b/src/pages/RestaurantDetailPage/RestaurantDetailPage.test.tsx
@@ -1,11 +1,8 @@
 import { describe, test, expect } from 'vitest'
 import { render, screen, waitFor } from '@testing-library/react'
 import { userEvent } from '@testing-library/user-event'
-import { composeStories } from '@storybook/react-vite'
 
-import * as stories from './RestaurantDetailPage.stories'
-
-const { Success, Loading, Error, NotFound, WithModalOpen } = composeStories(stories)
+import { Success, Loading, Error, NotFound, WithModalOpen } from './RestaurantDetailPage.stories'
 
 describe('RestaurantDetailPage', () => {
   test('Should add an item to cart', async () => {
@@ -35,13 +32,6 @@ describe('RestaurantDetailPage', () => {
   test('Should execute story tests', async () => {
     await WithModalOpen.run()
   })
-
-  test('Should add an item to cart (using render - LEGACY)', async () => {
-    await WithModalOpen.load()
-    const canvas = render(<WithModalOpen />)
-
-    await WithModalOpen.play?.({ canvas, userEvent } as any)
-  })
 })
 
 // If we were to not use @storyboook/testing-react:
diff --git a/src/pages/RestaurantDetailPage/components/FoodItem/FoodItem.stories.tsx b/src/pages/RestaurantDetailPage/components/FoodItem/FoodItem.stories.tsx
index 0a49ef85..85d542cb 100644
--- a/src/pages/RestaurantDetailPage/components/FoodItem/FoodItem.stories.tsx
+++ b/src/pages/RestaurantDetailPage/components/FoodItem/FoodItem.stories.tsx
@@ -1,35 +1,27 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 import { fn } from 'storybook/test'
 
 import { FoodItem } from './FoodItem'
 
-const meta = {
+const meta = preview.meta({
   title: 'Pages/RestaurantDetailPage/Components/FoodItem',
   component: FoodItem,
   args: {
-    /* 
+    /*
     The following line emulates the event handler that would be passed to the component
     Read more about the `fn` utility function at
-    https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function 
+    https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function
     */
     onClick: fn(),
   },
-} satisfies Meta<typeof FoodItem>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   args: {
     name: 'Food',
     price: 7.5,
     description: 'nice stuff',
   },
-}
+})
 
-export const WithQuantity: Story = {
-  args: {
-    ...Default.args,
-    quantity: 5,
-  },
-}
+export const WithQuantity = Default.extend({ args: { quantity: 5 } })
diff --git a/src/pages/RestaurantDetailPage/components/FoodItemModal/FoodItemModal.stories.tsx b/src/pages/RestaurantDetailPage/components/FoodItemModal/FoodItemModal.stories.tsx
index 500a73e6..bc8ecd3d 100644
--- a/src/pages/RestaurantDetailPage/components/FoodItemModal/FoodItemModal.stories.tsx
+++ b/src/pages/RestaurantDetailPage/components/FoodItemModal/FoodItemModal.stories.tsx
@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 import { useState } from 'react'
 import { fn } from 'storybook/test'
 
@@ -6,13 +6,18 @@ import { Button } from '../../../../components/Button'
 
 import { FoodItemModal } from './FoodItemModal'
 
-const meta = {
+const meta = preview.meta({
   title: 'Pages/RestaurantDetailPage/Components/FoodItemModal',
   component: FoodItemModal,
   parameters: {
     // This makes it so that the modal is loaded inside of an iframe in docs mode.
     // If it's not rendered in an iframe, the modal is going to open on top of Storybook itself!
-    docs: { inlineStories: false, iframeHeight: 600 },
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: '600px',
+      },
+    },
   },
   decorators: [
     (StoryEl) => (
@@ -58,23 +63,20 @@ const meta = {
       </>
     )
   },
-} satisfies Meta<typeof FoodItemModal>
-
-export default meta
-type Story = StoryObj<typeof meta>
+})
 
-export const Desktop: Story = {
-  parameters: {
+export const Desktop = meta.story({
+  globals: {
     viewport: {
-      defaultViewport: 'responsive',
+      value: 'responsive',
     },
   },
-}
+})
 
-export const Mobile: Story = {
-  parameters: {
+export const Mobile = meta.story({
+  globals: {
     viewport: {
-      defaultViewport: 'iphonex',
+      value: 'iphonex',
     },
   },
-}
+})
diff --git a/src/pages/SuccessPage/SuccessPage.stories.tsx b/src/pages/SuccessPage/SuccessPage.stories.tsx
index 7d4320f8..bc583ebd 100644
--- a/src/pages/SuccessPage/SuccessPage.stories.tsx
+++ b/src/pages/SuccessPage/SuccessPage.stories.tsx
@@ -1,8 +1,8 @@
-import { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 
 import { SuccessPage } from './SuccessPage'
 
-const meta = {
+const meta = preview.meta({
   title: 'Pages/SuccessPage',
   component: SuccessPage,
   parameters: {
@@ -12,12 +12,9 @@ const meta = {
       url: 'https://www.figma.com/file/3Q1HTCalD0lJnNvcMoEw1x/Mealdrop?node-id=426%3A3444',
     },
   },
-} satisfies Meta<typeof SuccessPage>
+})
 
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
+export const Default = meta.story({
   parameters: {
     store: {
       initialState: {
@@ -42,4 +39,4 @@ export const Default: Story = {
       },
     },
   },
-}
+})
diff --git a/src/pages/UserFlows.stories.tsx b/src/pages/UserFlows.stories.tsx
index f630a8d3..c0536751 100644
--- a/src/pages/UserFlows.stories.tsx
+++ b/src/pages/UserFlows.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 import { http, HttpResponse } from 'msw'
 import { within, expect } from 'storybook/test'
 
@@ -6,9 +6,12 @@ import { BASE_URL } from '../api'
 import { restaurantsCompleteData } from '../stub/restaurants'
 import { withDeeplink } from '../../.storybook/withDeeplink'
 
-const meta = {
+const meta = preview.meta({
   title: 'UserFlows/App',
   component: () => <></>,
+  args: {
+    demoMode: false,
+  },
   parameters: {
     layout: 'fullscreen',
     deeplink: { route: '/', path: '/' },
@@ -42,25 +45,22 @@ const meta = {
       control: { type: 'boolean' },
     },
   },
-} satisfies Meta<{ demoMode: boolean }>
-export default meta
-
-type Story = StoryObj<{ demoMode: boolean }>
+})
 
-export const Home = {}
+export const Home = meta.story()
 
-export const ToCategoryListPage = {
+export const ToCategoryListPage = meta.story({
   play: async ({ canvasElement, step, userEvent }) => {
     const canvas = within(canvasElement)
     await step('Visit Restaurants page', async () => {
       await userEvent.click(canvas.getByText('View all restaurants'))
     })
   },
-} satisfies Story
+})
 
-export const ToCategoryDetailPage = {
+export const ToCategoryDetailPage = meta.story({
   play: async (context) => {
-    await ToCategoryListPage.play(context)
+    await ToCategoryListPage.input.play(context)
     const { canvasElement, step, userEvent } = context
 
     const canvas = within(canvasElement)
@@ -68,11 +68,11 @@ export const ToCategoryDetailPage = {
       await userEvent.click(canvas.getByTestId('Burgers'))
     })
   },
-} satisfies Story
+})
 
-export const ToRestaurantDetailPage = {
+export const ToRestaurantDetailPage = meta.story({
   play: async (context) => {
-    await ToCategoryDetailPage.play(context)
+    await ToCategoryDetailPage.input.play(context)
     const { canvasElement, step, userEvent } = context
 
     const canvas = within(canvasElement)
@@ -83,11 +83,11 @@ export const ToRestaurantDetailPage = {
       await userEvent.click(restaurantCards[0])
     })
   },
-} satisfies Story
+})
 
-export const ToCheckoutPage = {
+export const ToCheckoutPage = meta.story({
   play: async (context) => {
-    await ToRestaurantDetailPage.play(context)
+    await ToRestaurantDetailPage.input.play(context)
     const { canvasElement, userEvent, step } = context
 
     const canvas = within(canvasElement)
@@ -122,11 +122,11 @@ export const ToCheckoutPage = {
       await userEvent.click(canvas.getByText(/checkout/i))
     })
   },
-} satisfies Story
+})
 
-export const ToSuccessPage = {
+export const ToSuccessPage = meta.story({
   play: async (context) => {
-    await ToCheckoutPage.play(context)
+    await ToCheckoutPage.input.play(context)
     const { canvas, step, userEvent } = context
 
     await step('Fill in user details', async () => {
@@ -150,11 +150,11 @@ export const ToSuccessPage = {
       await userEvent.click(canvas.getByText(/Complete/i))
     })
   },
-} satisfies Story
+})
 
-export const DemoMode: Story = {
-  ...ToSuccessPage,
+export const DemoMode = meta.story({
+  ...ToSuccessPage.input,
   args: {
     demoMode: true,
   },
-}
+})
diff --git a/src/templates/PageTemplate.stories.tsx b/src/templates/PageTemplate.stories.tsx
index 67891eed..15466eea 100644
--- a/src/templates/PageTemplate.stories.tsx
+++ b/src/templates/PageTemplate.stories.tsx
@@ -1,42 +1,39 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
+import preview from '#.storybook/preview'
 import * as React from 'react'
 
 import { cartItems } from '../stub/cart-items'
 
 import { PageTemplate } from './PageTemplate'
 
-const meta = {
+const meta = preview.meta({
   title: 'Templates/PageTemplate',
   component: PageTemplate,
   parameters: {
     layout: 'fullscreen',
   },
-} satisfies Meta<typeof PageTemplate>
-
-export default meta
-type Story = StoryObj<typeof meta>
+})
 
 const DummyComponent: React.FC<React.PropsWithChildren<unknown>> = ({ children }) => (
   <div style={{ padding: 60 }}>{children}</div>
 )
 
-export const Default: Story = {
+export const Default = meta.story({
   args: {
     children: (
       <DummyComponent>Default template with scrollable header and navigation items</DummyComponent>
     ),
   },
-}
+})
 
-export const DefaultWithItemsInTheCart: Story = {
+export const DefaultWithItemsInTheCart = meta.story({
   parameters: {
     store: {
       initialState: { cart: { items: cartItems } },
     },
   },
-}
+})
 
-export const StickyHeader: Story = {
+export const StickyHeader = meta.story({
   args: {
     type: 'sticky-header',
     children: (
@@ -45,9 +42,9 @@ export const StickyHeader: Story = {
       </DummyComponent>
     ),
   },
-}
+})
 
-export const Basic: Story = {
+export const Basic = meta.story({
   args: {
     type: 'basic',
     children: (
@@ -56,4 +53,4 @@ export const Basic: Story = {
       </DummyComponent>
     ),
   },
-}
+})
diff --git a/vitest.workspace.ts b/vitest.workspace.ts
index ae4b0795..0d30bc43 100644
--- a/vitest.workspace.ts
+++ b/vitest.workspace.ts
@@ -23,7 +23,6 @@ export default defineWorkspace([
           },
         ],
       },
-      setupFiles: ['.storybook/vitest.setup.ts'],
     },
   },
 ])
diff --git a/yarn.lock b/yarn.lock
index 25542d64..d1a50e4d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1625,15 +1625,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-a11y@npm:^9.0.0":
-  version: 9.0.0
-  resolution: "@storybook/addon-a11y@npm:9.0.0"
+"@storybook/addon-a11y@npm:0.0.0-pr-30601-sha-40d66b1f":
+  version: 0.0.0-pr-30601-sha-40d66b1f
+  resolution: "@storybook/addon-a11y@npm:0.0.0-pr-30601-sha-40d66b1f"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     axe-core: "npm:^4.2.0"
   peerDependencies:
-    storybook: ^9.0.0
-  checksum: 10c0/6f7721efebc091e3aaf91240974cfc25aaef81d0a9bae57fe40993f8cdfa5d9c8fda512a1c8d2a4dbf148217bc41541523f066e9871dd15710adec5716e6e288
+    storybook: ^0.0.0-pr-30601-sha-40d66b1f
+  checksum: 10c0/b610a6196fd2287e747d97f1b61e706f5a768e055d638dbb4ddc268625687db5d6f114ce186111f13988fa3cd246cad237297378da8b790b38ac835eaa9a1813
   languageName: node
   linkType: hard
 
@@ -1653,16 +1653,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-designs@npm:9.0.0-next.3":
-  version: 9.0.0-next.3
-  resolution: "@storybook/addon-designs@npm:9.0.0-next.3"
+"@storybook/addon-designs@npm:^10.0.1":
+  version: 10.0.1
+  resolution: "@storybook/addon-designs@npm:10.0.1"
   dependencies:
     "@figspec/react": "npm:^1.0.0"
   peerDependencies:
-    "@storybook/addon-docs": ^0.0.0-0 || ^9.0.0 || ^9.0.0-0
+    "@storybook/addon-docs": ^0.0.0-0 || ^9.0.0 || ^9.1.0-0
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    storybook: ^0.0.0-0 || ^9.0.0 || ^9.0.0-0
+    storybook: ^0.0.0-0 || ^9.0.0 || ^9.1.0-0
   peerDependenciesMeta:
     "@storybook/addon-docs":
       optional: true
@@ -1670,41 +1670,41 @@ __metadata:
       optional: true
     react-dom:
       optional: true
-  checksum: 10c0/fb05f5aa9ad87d6ab064b15b686442527c633869dddddfe41844971692a638e3435e57817072d0d4a52cd8a89bbd5749047d5af3a4d4ae903d581c48858be5f7
+  checksum: 10c0/42d4cb9a44a1c7bb084ea9bd87a1fccedcea92955299c6560ca16d1c3de84fc03860e7ff875116547847cd64cfdc51402cff652c99c33b70b352eb38a3c6f878
   languageName: node
   linkType: hard
 
-"@storybook/addon-docs@npm:^9.0.0":
-  version: 9.0.0
-  resolution: "@storybook/addon-docs@npm:9.0.0"
+"@storybook/addon-docs@npm:0.0.0-pr-30601-sha-40d66b1f":
+  version: 0.0.0-pr-30601-sha-40d66b1f
+  resolution: "@storybook/addon-docs@npm:0.0.0-pr-30601-sha-40d66b1f"
   dependencies:
     "@mdx-js/react": "npm:^3.0.0"
-    "@storybook/csf-plugin": "npm:9.0.0"
+    "@storybook/csf-plugin": "npm:0.0.0-pr-30601-sha-40d66b1f"
     "@storybook/icons": "npm:^1.2.12"
-    "@storybook/react-dom-shim": "npm:9.0.0"
+    "@storybook/react-dom-shim": "npm:0.0.0-pr-30601-sha-40d66b1f"
     react: "npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
     react-dom: "npm:^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
     ts-dedent: "npm:^2.0.0"
   peerDependencies:
-    storybook: ^9.0.0
-  checksum: 10c0/c3275160a45301ffde37f5a275ede2dbb932ecbb47bc68a5bcd7f4cea7e4efa173b1ca9252d57674bdb00480f101864e64e9e69991474ff6f3a5f8aeae75c2c9
+    storybook: ^0.0.0-pr-30601-sha-40d66b1f
+  checksum: 10c0/f7fe4568bba0a853a189e8806bf8de5b64445a508d129f3f4771f772161c62f074276443b4a8cc599c37fd448221d4821044a6d04dfd9454f6b3829419181d21
   languageName: node
   linkType: hard
 
-"@storybook/addon-themes@npm:^9.0.0":
-  version: 9.0.0
-  resolution: "@storybook/addon-themes@npm:9.0.0"
+"@storybook/addon-themes@npm:0.0.0-pr-30601-sha-40d66b1f":
+  version: 0.0.0-pr-30601-sha-40d66b1f
+  resolution: "@storybook/addon-themes@npm:0.0.0-pr-30601-sha-40d66b1f"
   dependencies:
     ts-dedent: "npm:^2.0.0"
   peerDependencies:
-    storybook: ^9.0.0
-  checksum: 10c0/e7c569ebcef166cdf9dc0203e2abce2da25b8f1de1f4545c8c0a9f333f1d70e5564677b0b45ffe35d29f0395486d5137e7d23df5cfe72fe95004f83243050a54
+    storybook: ^0.0.0-pr-30601-sha-40d66b1f
+  checksum: 10c0/b25f6ca9951db8dd46144b16cd7bf6fd7e947b2ad3834d7975699b9881dccf1c88fe9e7d8aa8b2dc9858e5532ca6fa8854edc05cecc59cb4673f60e9c4333201
   languageName: node
   linkType: hard
 
-"@storybook/addon-vitest@npm:^9.0.0":
-  version: 9.0.0
-  resolution: "@storybook/addon-vitest@npm:9.0.0"
+"@storybook/addon-vitest@npm:0.0.0-pr-30601-sha-40d66b1f":
+  version: 0.0.0-pr-30601-sha-40d66b1f
+  resolution: "@storybook/addon-vitest@npm:0.0.0-pr-30601-sha-40d66b1f"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.4.0"
@@ -1713,7 +1713,7 @@ __metadata:
   peerDependencies:
     "@vitest/browser": ^3.0.0
     "@vitest/runner": ^3.0.0
-    storybook: ^9.0.0
+    storybook: ^0.0.0-pr-30601-sha-40d66b1f
     vitest: ^3.0.0
   peerDependenciesMeta:
     "@vitest/browser":
@@ -1722,31 +1722,31 @@ __metadata:
       optional: true
     vitest:
       optional: true
-  checksum: 10c0/42b89c8c269c233243913a6c813f68325b90455f0624ebcc29e839992bbdd244af0b262f42592bb1cf35c0de81c4fb5b72814c386624810e6fad24d789982f41
+  checksum: 10c0/9cb4baec7ad0d3cf58204c6980da88d810db2a43d0c2fdf645b53d4a2b032f65aec8d8a6a729013d3fbcac71455547faee68463c2d28391dd58c0c53a7032865
   languageName: node
   linkType: hard
 
-"@storybook/builder-vite@npm:9.0.0":
-  version: 9.0.0
-  resolution: "@storybook/builder-vite@npm:9.0.0"
+"@storybook/builder-vite@npm:0.0.0-pr-30601-sha-40d66b1f":
+  version: 0.0.0-pr-30601-sha-40d66b1f
+  resolution: "@storybook/builder-vite@npm:0.0.0-pr-30601-sha-40d66b1f"
   dependencies:
-    "@storybook/csf-plugin": "npm:9.0.0"
+    "@storybook/csf-plugin": "npm:0.0.0-pr-30601-sha-40d66b1f"
     ts-dedent: "npm:^2.0.0"
   peerDependencies:
-    storybook: ^9.0.0
+    storybook: ^0.0.0-pr-30601-sha-40d66b1f
     vite: ^5.0.0 || ^6.0.0
-  checksum: 10c0/15cf155b5dc8b05abac7376e7c233e4c12c24bdf22f492c4072888081db49577633504501bb3ac0c7cebcdca642169a3bbc57154b77506ecdc946cd911ad82fa
+  checksum: 10c0/438555c57dbf9d810dc9f49d54527ddb1c500c719d79dfb756f8dc1e018360b2d047c03283bf63e8c54a23d9ce426ad2ef84c7851ef5c7347e71391e6d5e8456
   languageName: node
   linkType: hard
 
-"@storybook/csf-plugin@npm:9.0.0":
-  version: 9.0.0
-  resolution: "@storybook/csf-plugin@npm:9.0.0"
+"@storybook/csf-plugin@npm:0.0.0-pr-30601-sha-40d66b1f":
+  version: 0.0.0-pr-30601-sha-40d66b1f
+  resolution: "@storybook/csf-plugin@npm:0.0.0-pr-30601-sha-40d66b1f"
   dependencies:
     unplugin: "npm:^1.3.1"
   peerDependencies:
-    storybook: ^9.0.0
-  checksum: 10c0/601f7e8425952e8fe28093ee17af8803f34b3378e4b54e565c0cc41d98e9df2ef93cdcd4dcc36fa87d264ac38c9ac5d7bd1abd79e8895261e22cfa556fcbbd63
+    storybook: ^0.0.0-pr-30601-sha-40d66b1f
+  checksum: 10c0/4ec2f507a9a873edfdca2d7fcee7cdde27e2c21356dd4d50971528080d2df874a3fcbd4037815f7c44d319d21e55d499e2a09b346acdd04b50f2deb2b97565c3
   languageName: node
   linkType: hard
 
@@ -1776,25 +1776,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react-dom-shim@npm:9.0.0":
-  version: 9.0.0
-  resolution: "@storybook/react-dom-shim@npm:9.0.0"
+"@storybook/react-dom-shim@npm:0.0.0-pr-30601-sha-40d66b1f":
+  version: 0.0.0-pr-30601-sha-40d66b1f
+  resolution: "@storybook/react-dom-shim@npm:0.0.0-pr-30601-sha-40d66b1f"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    storybook: ^9.0.0
-  checksum: 10c0/e0aa0de603ad67ba73f25c020ac10342d4c56915dbb13c0313ddeefa1f8d8413ad9b890b51e88811f0e47fffca01d8c46001f7fb3c421405b7369e592acbecba
+    storybook: ^0.0.0-pr-30601-sha-40d66b1f
+  checksum: 10c0/d3638bedd17848188c84cae6e0dbfb1e5c6f820ea50169c0e402391c2f3d3abf716a8fb721517b38ffc6dd294bc86524be378659f61e19037afcc4480e726226
   languageName: node
   linkType: hard
 
-"@storybook/react-vite@npm:^9.0.0":
-  version: 9.0.0
-  resolution: "@storybook/react-vite@npm:9.0.0"
+"@storybook/react-vite@npm:0.0.0-pr-30601-sha-40d66b1f":
+  version: 0.0.0-pr-30601-sha-40d66b1f
+  resolution: "@storybook/react-vite@npm:0.0.0-pr-30601-sha-40d66b1f"
   dependencies:
     "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.6.0"
     "@rollup/pluginutils": "npm:^5.0.2"
-    "@storybook/builder-vite": "npm:9.0.0"
-    "@storybook/react": "npm:9.0.0"
+    "@storybook/builder-vite": "npm:0.0.0-pr-30601-sha-40d66b1f"
+    "@storybook/react": "npm:0.0.0-pr-30601-sha-40d66b1f"
     find-up: "npm:^5.0.0"
     magic-string: "npm:^0.30.0"
     react-docgen: "npm:^8.0.0"
@@ -1803,27 +1803,27 @@ __metadata:
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    storybook: ^9.0.0
+    storybook: ^0.0.0-pr-30601-sha-40d66b1f
     vite: ^5.0.0 || ^6.0.0
-  checksum: 10c0/5c8af39bec95551116e00fea3827e36086a16d315ab4ddaef9ab88287758fbe060a10f1a262b03579db4f1d19d6f722b0f34dce367b701128b437f5b9fb75d10
+  checksum: 10c0/ce60f6c9468757290e6744e204f5987ba06d76eb66933acfb83922008c89b3a30b30d1326be22aacb39925b2d3e0439bdc707054b4ac16c69cf4406ce2639cd4
   languageName: node
   linkType: hard
 
-"@storybook/react@npm:9.0.0":
-  version: 9.0.0
-  resolution: "@storybook/react@npm:9.0.0"
+"@storybook/react@npm:0.0.0-pr-30601-sha-40d66b1f":
+  version: 0.0.0-pr-30601-sha-40d66b1f
+  resolution: "@storybook/react@npm:0.0.0-pr-30601-sha-40d66b1f"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
-    "@storybook/react-dom-shim": "npm:9.0.0"
+    "@storybook/react-dom-shim": "npm:0.0.0-pr-30601-sha-40d66b1f"
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta
-    storybook: ^9.0.0
+    storybook: ^0.0.0-pr-30601-sha-40d66b1f
     typescript: ">= 4.9.x"
   peerDependenciesMeta:
     typescript:
       optional: true
-  checksum: 10c0/cf1a62833ab8aec50dd9d6ff7a993a4954e04172b199d718d7f592dc7dc750caa18bea4ad0ec116a48e0331564e9863180462898daba77e6720690f9b50c699d
+  checksum: 10c0/622cd1b013f9c0b3db16a5a6c18fdce7f0ea791767bc995309925623e9782088b1b3a9b9edcd8249718ff9de4281961175e6012fc5a8ceaacd5c1994768a2e67
   languageName: node
   linkType: hard
 
@@ -3843,13 +3843,13 @@ __metadata:
     "@eslint/js": "npm:^9.21.0"
     "@hookform/resolvers": "npm:^4.1.3"
     "@reduxjs/toolkit": "npm:^2.6.0"
-    "@storybook/addon-a11y": "npm:^9.0.0"
+    "@storybook/addon-a11y": "npm:0.0.0-pr-30601-sha-40d66b1f"
     "@storybook/addon-coverage": "npm:^1.0.5"
-    "@storybook/addon-designs": "npm:9.0.0-next.3"
-    "@storybook/addon-docs": "npm:^9.0.0"
-    "@storybook/addon-themes": "npm:^9.0.0"
-    "@storybook/addon-vitest": "npm:^9.0.0"
-    "@storybook/react-vite": "npm:^9.0.0"
+    "@storybook/addon-designs": "npm:^10.0.1"
+    "@storybook/addon-docs": "npm:0.0.0-pr-30601-sha-40d66b1f"
+    "@storybook/addon-themes": "npm:0.0.0-pr-30601-sha-40d66b1f"
+    "@storybook/addon-vitest": "npm:0.0.0-pr-30601-sha-40d66b1f"
+    "@storybook/react-vite": "npm:0.0.0-pr-30601-sha-40d66b1f"
     "@storybook/test-runner": "npm:^0.22.0"
     "@testing-library/jest-dom": "npm:^6.6.3"
     "@testing-library/react": "npm:^16.2.0"
@@ -3879,7 +3879,7 @@ __metadata:
     eslint-plugin-jsx-a11y: "npm:^6.10.2"
     eslint-plugin-prettier: "npm:^5.2.3"
     eslint-plugin-react: "npm:^7.37.4"
-    eslint-plugin-storybook: "npm:^9.0.0"
+    eslint-plugin-storybook: "npm:0.0.0-pr-30601-sha-40d66b1f"
     eslint-plugin-unicorn: "npm:^57.0.0"
     globals: "npm:^16.0.0"
     happy-dom: "npm:^17.1.8"
@@ -3903,8 +3903,8 @@ __metadata:
     react-router-dom: "npm:^7.2.0"
     react-test-renderer: "npm:^19.0.0"
     react-transition-group: "npm:^4.4.5"
-    storybook: "npm:^9.0.0"
-    storybook-addon-test-codegen: "npm:^1.3.4"
+    storybook: "npm:0.0.0-pr-30601-sha-40d66b1f"
+    storybook-addon-test-codegen: "npm:^2.0.0"
     styled-components: "npm:^6.1.15"
     stylis: "npm:^4.3.6"
     typescript: "npm:^5.7.3"
@@ -4757,15 +4757,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-storybook@npm:^9.0.0":
-  version: 9.0.0
-  resolution: "eslint-plugin-storybook@npm:9.0.0"
+"eslint-plugin-storybook@npm:0.0.0-pr-30601-sha-40d66b1f":
+  version: 0.0.0-pr-30601-sha-40d66b1f
+  resolution: "eslint-plugin-storybook@npm:0.0.0-pr-30601-sha-40d66b1f"
   dependencies:
     "@typescript-eslint/utils": "npm:^8.8.1"
   peerDependencies:
     eslint: ">=8"
-    storybook: ^9.0.0
-  checksum: 10c0/6a2224be8e1a8369a3f97073527c20e662d79b8540932b571682121698e70c36ce7e92a0ad845471f65b38129ffc42c24503f87e7f6c9e167f652f5f08df2ca0
+    storybook: ^0.0.0-pr-30601-sha-40d66b1f
+  checksum: 10c0/3b2c8ce7d3a609a6b9a6b51affae1941d78a28848d08a1eb9965941a42d327c8c9248fae42c4c64354915a7102df5ae9e3196fddae8b4c4a06687d949c4321ac
   languageName: node
   linkType: hard
 
@@ -9661,18 +9661,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"storybook-addon-test-codegen@npm:^1.3.4":
-  version: 1.3.4
-  resolution: "storybook-addon-test-codegen@npm:1.3.4"
+"storybook-addon-test-codegen@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "storybook-addon-test-codegen@npm:2.0.0"
   peerDependencies:
-    storybook: ">=8.3.0"
-  checksum: 10c0/a734d11a5a04bf3b19c4b8c330872678be3f24b364b66029723be50334604e52f5238ed0c7ea339089af5bbb87b2847b6b3dc42893daf7f7acc4911006f04ca0
+    storybook: ^9.0.0 || ^9.0.0-rc.4 || ^0.0.0-0
+  checksum: 10c0/3e709cb68c208a51a83d793b4ca896dc9b4a60ca32ab8b85031e55035883885ceef08ec345cce2608afeaf2af9d1ad50ea8940dd167fdbd86dcd7caf0a938076
   languageName: node
   linkType: hard
 
-"storybook@npm:^9.0.0":
-  version: 9.0.0
-  resolution: "storybook@npm:9.0.0"
+"storybook@npm:0.0.0-pr-30601-sha-40d66b1f":
+  version: 0.0.0-pr-30601-sha-40d66b1f
+  resolution: "storybook@npm:0.0.0-pr-30601-sha-40d66b1f"
   dependencies:
     "@storybook/global": "npm:^5.0.0"
     "@testing-library/jest-dom": "npm:^6.6.3"
@@ -9692,7 +9692,7 @@ __metadata:
       optional: true
   bin:
     storybook: ./bin/index.cjs
-  checksum: 10c0/55424999e20c39124bf2dfb4e7ab0ffd85dbee8e04ba0ec9482083f5dd349ad441bbc6fdbe87d55d407ec896dbe91a48f9ad86f9d01605a37683c651c5b8b1a9
+  checksum: 10c0/54126f8ca61b2aa007a2b33d79bd4e34ff1e18580947c716f8a319944e2f146ab1edb60fb67e02ceb5bd8e1f156df3a4a4833467194256043c54fa2a4d50f333
   languageName: node
   linkType: hard