diff --git a/.storybook/main.js b/.storybook/main.js
index 7516ef3..496a659 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,6 +1,10 @@
 /** @type { import('@storybook/react-vite').StorybookConfig } */
 const config = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  stories: [
+    '../src/Intro.mdx',
+    '../src/**/*.mdx',
+    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
diff --git a/src/Intro.mdx b/src/Intro.mdx
new file mode 100644
index 0000000..7dd892d
--- /dev/null
+++ b/src/Intro.mdx
@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title='Design System/Introduction' />
+
+# Introduction to the Storybook design system tutorial
+
+The Storybook design system tutorial is a subset of the full [Storybook design system](https://github.com/storybookjs/design-system/), created as a learning resource for those interested in learning how to write and publish a design system using best practice techniques.
+
+Learn more in the [Storybook tutorials](https://storybook.js.org/tutorials/)