diff --git a/.storybook/main.ts b/.storybook/main.ts
index 3def8b8f00..1eea577b5c 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -2,7 +2,7 @@ import type { StorybookConfig } from '@storybook/web-components-vite';
 import { type BuildOptions, type UserConfig, mergeConfig } from 'vite';
 
 const config: StorybookConfig = {
-  stories: ['../src/**/*.stories.ts'],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.ts'],
   addons: ['@storybook/addon-essentials', '@storybook/addon-a11y', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/web-components-vite',
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
index 6a1becce36..b683301e80 100644
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@@ -65,15 +65,7 @@ export const parameters = {
     storySort: {
       // Story section order.
       // https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#sorting-stories
-      order: [
-        'pages',
-        ['home', 'home personalized'],
-        'components',
-        ['*', 'form elements', 'cards', 'layout'],
-        'styles',
-        'timetable',
-        'internals',
-      ],
+      order: ['introduction', 'pages', 'components', 'styles', 'timetable', 'internals'],
     },
   },
 };
diff --git a/src/storybook/docs/getting-started.mdx b/src/storybook/docs/getting-started.mdx
new file mode 100644
index 0000000000..86193db024
--- /dev/null
+++ b/src/storybook/docs/getting-started.mdx
@@ -0,0 +1,7 @@
+import { Markdown, Meta } from '@storybook/blocks';
+
+import GettingStarted from '../../../docs/GETTING_STARTED.md?raw';
+
+<Meta title="introduction/Getting Started" />
+
+<Markdown>{GettingStarted}</Markdown>
diff --git a/src/storybook/docs/vision.mdx b/src/storybook/docs/vision.mdx
new file mode 100644
index 0000000000..bde5bf70dc
--- /dev/null
+++ b/src/storybook/docs/vision.mdx
@@ -0,0 +1,7 @@
+import { Markdown, Meta } from '@storybook/blocks';
+
+import Vision from '../../../docs/VISION.md?raw';
+
+<Meta title="introduction/Vision" />
+
+<Markdown>{Vision}</Markdown>