diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 28086b1..27a93a7 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -1,6 +1,8 @@
 import type { Preview } from '@storybook/svelte';
 import { init, locale, register } from 'svelte-i18n';
 
+import { mapLocaleToDir } from '../src/lib/i18n/index.ts';
+
 // See src/routes/+layout.svelte
 // Order is important!
 import '../src/theme.postcss';
@@ -14,6 +16,15 @@ register('he', () => import('../src/lib/i18n/locales/he.json'));
 init({ fallbackLocale: 'en', initialLocale: 'en' });
 locale.set('en');
 
+function withI18n(storyFn, context) {
+	const l = context.globals.locale;
+
+	locale.set(l);
+	document.dir = mapLocaleToDir(l);
+
+	return storyFn();
+}
+
 const preview: Preview = {
 	globalTypes: {
 		locale: {
@@ -49,4 +60,6 @@ const preview: Preview = {
 	}
 };
 
+export const decorators = [withI18n];
+
 export default preview;