diff --git a/packages/elements-react-stories/.storybook/main.ts b/packages/elements-react-stories/.storybook/main.ts
index 70efc7332..1258f37d4 100644
--- a/packages/elements-react-stories/.storybook/main.ts
+++ b/packages/elements-react-stories/.storybook/main.ts
@@ -16,7 +16,7 @@ const config: StorybookConfig = {
     options: {},
   },
 
-  viteFinal: async (config) =>
+  viteFinal: (config) =>
     mergeConfig(config, {
       plugins: [nxViteTsPaths(), vitePluginRequire()],
       resolve: {
diff --git a/packages/elements-react-stories/.storybook/modes.ts b/packages/elements-react-stories/.storybook/modes.ts
deleted file mode 100644
index b24583863..000000000
--- a/packages/elements-react-stories/.storybook/modes.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-// Copyright © 2024 Ory Corp
-// SPDX-License-Identifier: Apache-2.0
-
-// export const chromaticModes = Object.keys(langs).reduce((acc, lang) => {
-//   acc[lang] = {
-//     locale: lang,
-//   }
-//   return acc
-// }, {})
-
-export const chromaticModes = {
-  en: {
-    locale: "en",
-  },
-  de: {
-    locale: "de",
-  },
-}
diff --git a/packages/elements-react-stories/.storybook/preview.tsx b/packages/elements-react-stories/.storybook/preview.tsx
index 77c5df5f7..b0b45d046 100644
--- a/packages/elements-react-stories/.storybook/preview.tsx
+++ b/packages/elements-react-stories/.storybook/preview.tsx
@@ -1,9 +1,8 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Decorator, Preview } from "@storybook/react"
-import { chromaticModes } from "./modes"
 import "@ory/elements-react/theme/styles.css"
+import type { Decorator, Preview } from "@storybook/react"
 import { merge } from "lodash"
 import "./global.css"
 
@@ -23,9 +22,6 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
-    chromatic: {
-      modes: chromaticModes,
-    },
   },
 }
 
@@ -33,7 +29,19 @@ const withI18next: Decorator = (Story, context) => {
   const { locale } = context.globals
 
   return (
-    <Story args={merge({}, { config: { intl: { locale } } }, context.args)} />
+    <Story
+      args={merge(
+        {},
+        {
+          config: {
+            intl: {
+              locale: locale && typeof locale === "string" ? locale : "en",
+            },
+          },
+        },
+        context.args,
+      )}
+    />
   )
 }
 
@@ -48,7 +56,10 @@ export const globalTypes = {
       icon: "globe",
       items: [
         { value: "en", title: "English" },
-        { value: "de", title: "Deutsch" },
+        { value: "de", title: "German" },
+        { value: "sv", title: "Swedish" },
+        { value: "fr", title: "French" },
+        { value: "es", title: "Spanish" },
       ],
       showName: true,
     },
diff --git a/packages/elements-react-stories/project.json b/packages/elements-react-stories/project.json
index bf7bb6fa5..215508ab4 100644
--- a/packages/elements-react-stories/project.json
+++ b/packages/elements-react-stories/project.json
@@ -1,3 +1,10 @@
 {
-  "targets": {}
+  "targets": {
+    "storybook": {
+      "dependsOn": ["@ory/elements-react:build"]
+    },
+    "build-storybook": {
+      "dependsOn": ["@ory/elements-react:build"]
+    }
+  }
 }
diff --git a/packages/legacy-stories/project.json b/packages/legacy-stories/project.json
index b97505b2b..7d8314583 100644
--- a/packages/legacy-stories/project.json
+++ b/packages/legacy-stories/project.json
@@ -5,5 +5,12 @@
   "projectType": "library",
   "tags": [],
   "// targets": "to see all targets run: nx show project legacy-stories --web",
-  "targets": {}
+  "targets": {
+    "storybook": {
+      "dependsOn": ["@ory/elements-react:build"]
+    },
+    "build-storybook": {
+      "dependsOn": ["@ory/elements-react:build"]
+    }
+  }
 }