diff --git a/.eslintrc.json b/.eslintrc.json
index 02e6c67aab5..c205ddba995 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -33,8 +33,8 @@
           ["^@/data"],
           // From the `constants` directory.
           ["^@/lib/constants"],
-          // From the `.storybook/utils` file
-          ["^@/storybook-utils"],
+          // `.storybook` directory and utils files`
+          ["^@/storybook","^@/storybook-utils"],
           // Parent imports. Put `..` last.
           ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
           // Other relative imports. Put same-folder imports and `.` last.
diff --git a/.storybook/main.ts b/.storybook/main.ts
index e0f73e81f1c..98834c3edcc 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -1,3 +1,5 @@
+import path from "path"
+
 import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin"
 import type { StorybookConfig } from "@storybook/nextjs"
 
@@ -51,6 +53,11 @@ const config: StorybookConfig = {
           extensions: config.resolve.extensions,
         }),
       ]
+
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        "@/storybook/*": path.resolve(__dirname, "./.storybook/"),
+      }
     }
 
     // This modifies the existing image rule to exclude .svg files
diff --git a/src/components/Hero/ContentHero/ContentHero.stories.tsx b/src/components/Hero/ContentHero/ContentHero.stories.tsx
index 2d7d93af293..a6767b46b31 100644
--- a/src/components/Hero/ContentHero/ContentHero.stories.tsx
+++ b/src/components/Hero/ContentHero/ContentHero.stories.tsx
@@ -1,7 +1,7 @@
 import { useTranslations } from "next-intl"
 import { Meta, StoryObj } from "@storybook/react"
 
-import { langViewportModes } from "../../../../.storybook/modes"
+import { langViewportModes } from "@/storybook/modes"
 
 import ContentHeroComponent, { ContentHeroProps } from "."
 
diff --git a/src/components/Hero/HomeHero/HomeHero.stories.tsx b/src/components/Hero/HomeHero/HomeHero.stories.tsx
index dd276987429..4019017e809 100644
--- a/src/components/Hero/HomeHero/HomeHero.stories.tsx
+++ b/src/components/Hero/HomeHero/HomeHero.stories.tsx
@@ -1,9 +1,11 @@
 import { Meta, StoryObj } from "@storybook/react"
 
-import { langViewportModes } from "../../../../.storybook/modes"
+import { langViewportModes } from "@/storybook/modes"
 
 import HomeHeroComponent from "."
 
+import homeHeroImg from "@/public/images/home/hero.png"
+
 const meta = {
   title: "Organisms / Layouts / Hero",
   component: HomeHeroComponent,
@@ -26,8 +28,6 @@ const meta = {
 
 export default meta
 
-import homeHeroImg from "@/public/images/home/hero.png"
-
 export const HomeHero: StoryObj<typeof meta> = {
   args: {
     heroImg: homeHeroImg,
diff --git a/src/components/Hero/HubHero/HubHero.stories.tsx b/src/components/Hero/HubHero/HubHero.stories.tsx
index 1c109c0369f..d7f70d0feaa 100644
--- a/src/components/Hero/HubHero/HubHero.stories.tsx
+++ b/src/components/Hero/HubHero/HubHero.stories.tsx
@@ -4,7 +4,7 @@ import { Meta, StoryObj } from "@storybook/react"
 
 import { screens } from "@/lib/utils/screen"
 
-import { langViewportModes } from "../../../../.storybook/modes"
+import { langViewportModes } from "@/storybook/modes"
 
 import HubHeroComponent, { type HubHeroProps } from "./"
 
diff --git a/src/components/Hero/MdxHero/MdxHero.stories.tsx b/src/components/Hero/MdxHero/MdxHero.stories.tsx
index debce522d05..44e4901b537 100644
--- a/src/components/Hero/MdxHero/MdxHero.stories.tsx
+++ b/src/components/Hero/MdxHero/MdxHero.stories.tsx
@@ -5,7 +5,7 @@ import { HStack } from "@/components/ui/flex"
 
 import { screens } from "@/lib/utils/screen"
 
-import { langViewportModes } from "../../../../.storybook/modes"
+import { langViewportModes } from "@/storybook/modes"
 
 import MdxHeroComponent from "./"
 
diff --git a/src/components/MdComponents/MdComponents.stories.tsx b/src/components/MdComponents/MdComponents.stories.tsx
index 52db25e5037..f2e9c8423b9 100644
--- a/src/components/MdComponents/MdComponents.stories.tsx
+++ b/src/components/MdComponents/MdComponents.stories.tsx
@@ -1,7 +1,7 @@
 import pickBy from "lodash/pickBy"
 import type { Meta, StoryObj } from "@storybook/react/*"
 
-import { viewportModes } from "../../../.storybook/modes"
+import { viewportModes } from "@/storybook/modes"
 
 import MdComponentSet from "."
 
diff --git a/src/components/MergeInfographic/MergeInfographic.stories.tsx b/src/components/MergeInfographic/MergeInfographic.stories.tsx
index 6b486f5e1ec..e2b29fb7828 100644
--- a/src/components/MergeInfographic/MergeInfographic.stories.tsx
+++ b/src/components/MergeInfographic/MergeInfographic.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react"
 
-import { langViewportModes } from "../../../.storybook/modes"
+import { langViewportModes } from "@/storybook/modes"
 
 import MergeInfographicComponent from "."
 
diff --git a/src/components/Simulator/__stories__/Explanation.stories.tsx b/src/components/Simulator/__stories__/Explanation.stories.tsx
index 19c1f8405e8..e1ca32eac1b 100644
--- a/src/components/Simulator/__stories__/Explanation.stories.tsx
+++ b/src/components/Simulator/__stories__/Explanation.stories.tsx
@@ -2,7 +2,8 @@ import pickBy from "lodash/pickBy"
 import type { Meta, StoryObj } from "@storybook/react"
 import { fn } from "@storybook/test"
 
-import { viewportModes } from "../../../../.storybook/modes"
+import { viewportModes } from "@/storybook/modes"
+
 import { Explanation as ExplanationComponent } from "../Explanation"
 import { SendReceiveIcon } from "../icons"
 
diff --git a/src/layouts/stories/BaseLayout.stories.tsx b/src/layouts/stories/BaseLayout.stories.tsx
index c0079c8248e..c72db420fd2 100644
--- a/src/layouts/stories/BaseLayout.stories.tsx
+++ b/src/layouts/stories/BaseLayout.stories.tsx
@@ -2,7 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react"
 
 import { Center } from "@/components/ui/flex"
 
-import { langViewportModes } from "../../../.storybook/modes"
+import { langViewportModes } from "@/storybook/modes"
+
 import { BaseLayout as BaseLayoutComponent } from "../BaseLayout"
 
 const meta = {
diff --git a/src/layouts/stories/ContentLayout.stories.tsx b/src/layouts/stories/ContentLayout.stories.tsx
index 44b16b08087..28f3911db7a 100644
--- a/src/layouts/stories/ContentLayout.stories.tsx
+++ b/src/layouts/stories/ContentLayout.stories.tsx
@@ -2,7 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react"
 
 import { Center } from "@/components/ui/flex"
 
-import { langViewportModes } from "../../../.storybook/modes"
+import { langViewportModes } from "@/storybook/modes"
+
 import { ContentLayout as ContentLayoutComponent } from "../ContentLayout"
 
 const meta = {
diff --git a/tsconfig.json b/tsconfig.json
index 1b936f73573..f7ded6cb397 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,8 @@
     "paths": {
       "@/*": ["./src/*"],
       "@/public/*": ["./public/*"],
-      "@/storybook-utils": ["./.storybook/utils.ts"]
+      "@/storybook-utils": ["./.storybook/utils.ts"],
+      "@/storybook/*": ["./.storybook/*"]
     }
   },
   "include": ["./src/**/*", "next-env.d.ts", "**/*.ts", "**/*.tsx", ".storybook/**/*"],