diff --git a/src/components/Scroller/Scroller.mdx b/src/components/Scroller/Scroller.mdx
new file mode 100644
index 00000000..07cfc85e
--- /dev/null
+++ b/src/components/Scroller/Scroller.mdx
@@ -0,0 +1,19 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as ScrollerStories from './Scroller.stories.svelte';
+
+<Meta of={ScrollerStories} />
+
+# Scroller
+
+The `Scroller` component TK
+
+```svelte
+<script>
+  import { Scroller } from '@reuters-graphics/graphics-components';
+</script>
+
+<Scroller />
+```
+
+<Canvas of={ScrollerStories.Demo} />
diff --git a/src/components/Scroller/Scroller.stories.svelte b/src/components/Scroller/Scroller.stories.svelte
index e930a4bb..a413b397 100644
--- a/src/components/Scroller/Scroller.stories.svelte
+++ b/src/components/Scroller/Scroller.stories.svelte
@@ -1,24 +1,10 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import interactiveDocs from './stories/docs/interactive.md?raw';
-  // @ts-ignore raw
-  import ai2svelteDocs from './stories/docs/ai2svelte.md?raw';
-  // @ts-ignore raw
-  import archieMLDocs from './stories/docs/archieML.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import Scroller from './Scroller.svelte';
 
-  import {
-    withComponentDocs,
-    withStoryDocs,
-  } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Graphics/Scroller',
     component: Scroller,
-    ...withComponentDocs(componentDocs),
     argTypes: {
       steps: { control: false },
       backgroundWidth: {
@@ -34,17 +20,15 @@
         options: ['fb', 'bf'],
       },
     },
-  };
+  });
 </script>
 
 <script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-
-  import BasicStep from './stories/components/basic/Step.svelte';
-  import InteractiveForeground from './stories/components/basic/InteractiveForeground.svelte';
-  import AiMap1 from './stories/components/ai2svelte/ai-scroller-1.svelte';
-  import AiMap2 from './stories/components/ai2svelte/ai-scroller-2.svelte';
-  import AiMap3 from './stories/components/ai2svelte/ai-scroller-3.svelte';
+  import BasicStep from './demo/components/basic/Step.svelte';
+  import InteractiveForeground from './demo/components/basic/InteractiveForeground.svelte';
+  import AiMap1 from './demo/components/ai2svelte/ai-scroller-1.svelte';
+  import AiMap2 from './demo/components/ai2svelte/ai-scroller-2.svelte';
+  import AiMap3 from './demo/components/ai2svelte/ai-scroller-3.svelte';
 
   const aiCharts = {
     AiMap1,
@@ -79,15 +63,9 @@
   };
 </script>
 
-<Template >
-  {#snippet children({ args })}
-    <Scroller {...args} />
-  {/snippet}
-</Template>
-
 <Story
-  name="Default"
-  args="{{
+  name="Demo"
+  args={{
     steps: [
       {
         background: BasicStep,
@@ -112,14 +90,14 @@
     backgroundWidth: 'fluid',
     embeddedLayout: 'fb',
     embedded: false,
-  }}"
+  }}
 />
 
-<Story name="ArchieML" args="{docBlock}" {...withStoryDocs(archieMLDocs)} />
+<Story name="ArchieML" args={docBlock} />
 
 <Story
   name="Foreground components"
-  args="{{
+  args={{
     steps: [
       {
         background: BasicStep,
@@ -142,13 +120,12 @@
     backgroundWidth: 'fluid',
     embeddedLayout: 'fb',
     embedded: false,
-  }}"
-  {...withStoryDocs(interactiveDocs)}
+  }}
 />
 
 <Story
   name="Ai2svelte"
-  args="{{
+  args={{
     steps: [
       {
         background: AiMap1,
@@ -175,6 +152,5 @@
     backgroundWidth: 'fluid',
     embeddedLayout: 'fb',
     embedded: false,
-  }}"
-  {...withStoryDocs(ai2svelteDocs)}
+  }}
 />
diff --git a/src/components/Scroller/stories/components/ai2svelte/ai-scroller-1.svelte b/src/components/Scroller/demo/components/ai2svelte/ai-scroller-1.svelte
similarity index 100%
rename from src/components/Scroller/stories/components/ai2svelte/ai-scroller-1.svelte
rename to src/components/Scroller/demo/components/ai2svelte/ai-scroller-1.svelte
diff --git a/src/components/Scroller/stories/components/ai2svelte/ai-scroller-2.svelte b/src/components/Scroller/demo/components/ai2svelte/ai-scroller-2.svelte
similarity index 100%
rename from src/components/Scroller/stories/components/ai2svelte/ai-scroller-2.svelte
rename to src/components/Scroller/demo/components/ai2svelte/ai-scroller-2.svelte
diff --git a/src/components/Scroller/stories/components/ai2svelte/ai-scroller-3.svelte b/src/components/Scroller/demo/components/ai2svelte/ai-scroller-3.svelte
similarity index 100%
rename from src/components/Scroller/stories/components/ai2svelte/ai-scroller-3.svelte
rename to src/components/Scroller/demo/components/ai2svelte/ai-scroller-3.svelte
diff --git a/src/components/Scroller/stories/components/ai2svelte/images/step-1-lg.png b/src/components/Scroller/demo/components/ai2svelte/images/step-1-lg.png
similarity index 100%
rename from src/components/Scroller/stories/components/ai2svelte/images/step-1-lg.png
rename to src/components/Scroller/demo/components/ai2svelte/images/step-1-lg.png
diff --git a/src/components/Scroller/stories/components/ai2svelte/images/step-1-md.png b/src/components/Scroller/demo/components/ai2svelte/images/step-1-md.png
similarity index 100%
rename from src/components/Scroller/stories/components/ai2svelte/images/step-1-md.png
rename to src/components/Scroller/demo/components/ai2svelte/images/step-1-md.png
diff --git a/src/components/Scroller/stories/components/ai2svelte/images/step-1-sm.png b/src/components/Scroller/demo/components/ai2svelte/images/step-1-sm.png
similarity index 100%
rename from src/components/Scroller/stories/components/ai2svelte/images/step-1-sm.png
rename to src/components/Scroller/demo/components/ai2svelte/images/step-1-sm.png
diff --git a/src/components/Scroller/stories/components/ai2svelte/images/step-1-xl.png b/src/components/Scroller/demo/components/ai2svelte/images/step-1-xl.png
similarity index 100%
rename from src/components/Scroller/stories/components/ai2svelte/images/step-1-xl.png
rename to src/components/Scroller/demo/components/ai2svelte/images/step-1-xl.png
diff --git a/src/components/Scroller/stories/components/ai2svelte/images/step-1-xs.png b/src/components/Scroller/demo/components/ai2svelte/images/step-1-xs.png
similarity index 100%
rename from src/components/Scroller/stories/components/ai2svelte/images/step-1-xs.png
rename to src/components/Scroller/demo/components/ai2svelte/images/step-1-xs.png
diff --git a/src/components/Scroller/stories/components/ai2svelte/images/step-2-lg.png b/src/components/Scroller/demo/components/ai2svelte/images/step-2-lg.png
similarity index 100%
rename from src/components/Scroller/stories/components/ai2svelte/images/step-2-lg.png
rename to src/components/Scroller/demo/components/ai2svelte/images/step-2-lg.png
diff --git a/src/components/Scroller/stories/components/ai2svelte/images/step-2-md.png b/src/components/Scroller/demo/components/ai2svelte/images/step-2-md.png
similarity index 100%
rename from src/components/Scroller/stories/components/ai2svelte/images/step-2-md.png
rename to src/components/Scroller/demo/components/ai2svelte/images/step-2-md.png
diff --git a/src/components/Scroller/stories/components/ai2svelte/images/step-2-sm.png b/src/components/Scroller/demo/components/ai2svelte/images/step-2-sm.png
similarity index 100%
rename from src/components/Scroller/stories/components/ai2svelte/images/step-2-sm.png
rename to src/components/Scroller/demo/components/ai2svelte/images/step-2-sm.png
diff --git a/src/components/Scroller/stories/components/ai2svelte/images/step-2-xl.png b/src/components/Scroller/demo/components/ai2svelte/images/step-2-xl.png
similarity index 100%
rename from src/components/Scroller/stories/components/ai2svelte/images/step-2-xl.png
rename to src/components/Scroller/demo/components/ai2svelte/images/step-2-xl.png
diff --git a/src/components/Scroller/stories/components/ai2svelte/images/step-2-xs.png b/src/components/Scroller/demo/components/ai2svelte/images/step-2-xs.png
similarity index 100%
rename from src/components/Scroller/stories/components/ai2svelte/images/step-2-xs.png
rename to src/components/Scroller/demo/components/ai2svelte/images/step-2-xs.png
diff --git a/src/components/Scroller/stories/components/ai2svelte/images/step-3-lg.png b/src/components/Scroller/demo/components/ai2svelte/images/step-3-lg.png
similarity index 100%
rename from src/components/Scroller/stories/components/ai2svelte/images/step-3-lg.png
rename to src/components/Scroller/demo/components/ai2svelte/images/step-3-lg.png
diff --git a/src/components/Scroller/stories/components/ai2svelte/images/step-3-md.png b/src/components/Scroller/demo/components/ai2svelte/images/step-3-md.png
similarity index 100%
rename from src/components/Scroller/stories/components/ai2svelte/images/step-3-md.png
rename to src/components/Scroller/demo/components/ai2svelte/images/step-3-md.png
diff --git a/src/components/Scroller/stories/components/ai2svelte/images/step-3-sm.png b/src/components/Scroller/demo/components/ai2svelte/images/step-3-sm.png
similarity index 100%
rename from src/components/Scroller/stories/components/ai2svelte/images/step-3-sm.png
rename to src/components/Scroller/demo/components/ai2svelte/images/step-3-sm.png
diff --git a/src/components/Scroller/stories/components/ai2svelte/images/step-3-xl.png b/src/components/Scroller/demo/components/ai2svelte/images/step-3-xl.png
similarity index 100%
rename from src/components/Scroller/stories/components/ai2svelte/images/step-3-xl.png
rename to src/components/Scroller/demo/components/ai2svelte/images/step-3-xl.png
diff --git a/src/components/Scroller/stories/components/ai2svelte/images/step-3-xs.png b/src/components/Scroller/demo/components/ai2svelte/images/step-3-xs.png
similarity index 100%
rename from src/components/Scroller/stories/components/ai2svelte/images/step-3-xs.png
rename to src/components/Scroller/demo/components/ai2svelte/images/step-3-xs.png
diff --git a/src/components/Scroller/stories/components/basic/InteractiveForeground.svelte b/src/components/Scroller/demo/components/basic/InteractiveForeground.svelte
similarity index 100%
rename from src/components/Scroller/stories/components/basic/InteractiveForeground.svelte
rename to src/components/Scroller/demo/components/basic/InteractiveForeground.svelte
diff --git a/src/components/Scroller/stories/components/basic/Step.svelte b/src/components/Scroller/demo/components/basic/Step.svelte
similarity index 100%
rename from src/components/Scroller/stories/components/basic/Step.svelte
rename to src/components/Scroller/demo/components/basic/Step.svelte
diff --git a/src/components/Scroller/stories/docs/ai2svelte.md b/src/components/Scroller/demo/docs/ai2svelte.md
similarity index 100%
rename from src/components/Scroller/stories/docs/ai2svelte.md
rename to src/components/Scroller/demo/docs/ai2svelte.md
diff --git a/src/components/Scroller/stories/docs/archieML.md b/src/components/Scroller/demo/docs/archieML.md
similarity index 100%
rename from src/components/Scroller/stories/docs/archieML.md
rename to src/components/Scroller/demo/docs/archieML.md
diff --git a/src/components/Scroller/stories/docs/component.md b/src/components/Scroller/demo/docs/component.md
similarity index 100%
rename from src/components/Scroller/stories/docs/component.md
rename to src/components/Scroller/demo/docs/component.md
diff --git a/src/components/Scroller/stories/docs/interactive.md b/src/components/Scroller/demo/docs/interactive.md
similarity index 100%
rename from src/components/Scroller/stories/docs/interactive.md
rename to src/components/Scroller/demo/docs/interactive.md