diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 4f79ce99a..b9c231781 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,5 +1,6 @@
 import type { Preview } from '@storybook/react'
-import React from 'react'
+import { Suspense, useEffect } from 'react'
+import { ThemeProvider, useTheme } from 'src/layout/ThemeContext'
 import i18n from 'src/locale/allTranslations'
 
 const preview: Preview = {
@@ -13,15 +14,73 @@ const preview: Preview = {
     },
   },
   decorators: [
-    (Story) => {
-      i18n
+    (Story, context) => {
+      const { locale, darkMode } = context.globals
+
       return (
-        <div style={{ direction: 'rtl' }}>
-          <Story />
-        </div>
+        <Suspense>
+          <ThemeProvider>
+            <StoryBookWrapper locale={locale} darkMode={darkMode}>
+              <Story />
+            </StoryBookWrapper>
+          </ThemeProvider>
+        </Suspense>
       )
     },
   ],
 }
 
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    defaultValue: 'he',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'he', title: 'עברית' },
+        { value: 'en', title: 'English' },
+      ],
+      showName: true,
+    },
+  },
+  darkMode: {
+    name: 'Dark Mode',
+    description: 'Enable dark mode',
+    defaultValue: false,
+    toolbar: {
+      icon: 'paintbrush',
+      items: [
+        { value: false, title: 'Light' },
+        { value: true, title: 'Dark' },
+      ],
+      showName: true,
+    },
+  },
+}
+
 export default preview
+
+const StoryBookWrapper = ({
+  darkMode,
+  locale,
+  children,
+}: {
+  darkMode?: boolean
+  locale?: string
+  children: React.ReactNode
+}) => {
+  const { isDarkTheme, toggleTheme } = useTheme()
+
+  useEffect(() => {
+    if (isDarkTheme !== darkMode) {
+      toggleTheme()
+    }
+  }, [darkMode, isDarkTheme, toggleTheme])
+
+  useEffect(() => {
+    i18n.changeLanguage(locale)
+  }, [locale])
+
+  return children
+}
diff --git a/package-lock.json b/package-lock.json
index 814629f42..63f6cdc40 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5164,22 +5164,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/@nx/eslint-plugin/node_modules/cosmiconfig": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
-      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
-      "dev": true,
-      "dependencies": {
-        "@types/parse-json": "^4.0.0",
-        "import-fresh": "^3.1.0",
-        "parse-json": "^5.0.0",
-        "path-type": "^4.0.0",
-        "yaml": "^1.7.2"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/@nx/eslint-plugin/node_modules/dotenv-expand": {
       "version": "11.0.7",
       "resolved": "https://registry.npmjs.org/dotenv-expand/-/dotenv-expand-11.0.7.tgz",
@@ -23289,8 +23273,9 @@
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.7.1.tgz",
       "integrity": "sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ==",
-      "devOptional": true,
       "license": "ISC",
+      "optional": true,
+      "peer": true,
       "bin": {
         "yaml": "bin.mjs"
       },