diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.mdx b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.mdx
new file mode 100644
index 00000000..6e7c817b
--- /dev/null
+++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.mdx
@@ -0,0 +1,21 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as ReutersGraphicsLogoStories from './ReutersGraphicsLogo.stories.svelte';
+
+<Meta of={ReutersGraphicsLogoStories} />
+
+# ReutersGraphicsLogo
+
+The `ReutersGraphicsLogo` component contains the Reuters Graphics team logo.
+
+> Generally, used only for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-logos-reuterslogo--docs) component.
+
+```svelte
+<script>
+  import { ReutersGraphicsLogo } from '@reuters-graphics/graphics-components';
+</script>
+
+<ReutersGraphicsLogo />
+```
+
+<Canvas of={ReutersGraphicsLogoStories.Demo} />
diff --git a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte
index c5243444..34093134 100644
--- a/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte
+++ b/src/components/ReutersGraphicsLogo/ReutersGraphicsLogo.stories.svelte
@@ -1,26 +1,14 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import ReutersGraphicsLogo from './ReutersGraphicsLogo.svelte';
-
-  import { withComponentDocs } from '$lib/docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Logos/ReutersGraphicsLogo',
     component: ReutersGraphicsLogo,
-    ...withComponentDocs(componentDocs),
-  };
+    argTypes: {
+      logoColour: { control: 'color' },
+      textColour: { control: 'color' },
+    },
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Template >
-  {#snippet children({ args })}
-    <ReutersGraphicsLogo {...args} />
-  {/snippet}
-</Template>
-
-<Story name="Default" args="{{}}" />
+<Story name="Demo" />
diff --git a/src/components/ReutersGraphicsLogo/stories/docs/component.md b/src/components/ReutersGraphicsLogo/stories/docs/component.md
deleted file mode 100644
index 6980dcaf..00000000
--- a/src/components/ReutersGraphicsLogo/stories/docs/component.md
+++ /dev/null
@@ -1,11 +0,0 @@
-Reuters Graphics team logo.
-
-> Generally, only used for internal tools. For public pages, use the [ReutersLogo](./?path=/docs/components-logos-reuterslogo--docs) component.
-
-```svelte
-<script>
-  import { ReutersGraphicsLogo } from '@reuters-graphics/graphics-components';
-</script>
-
-<ReutersGraphicsLogo />
-```