diff --git a/src/components/ReferralBlock/ReferralBlock.mdx b/src/components/ReferralBlock/ReferralBlock.mdx
new file mode 100644
index 00000000..0cffe82a
--- /dev/null
+++ b/src/components/ReferralBlock/ReferralBlock.mdx
@@ -0,0 +1,44 @@
+import { Meta, Canvas } from '@storybook/blocks';
+
+import * as ReferralBlockStories from './ReferralBlock.stories.svelte';
+
+<Meta of={ReferralBlockStories} />
+
+# ReferralBlock
+
+The `ReferralBlock` component creates a set of referral links from recent Reuters.com stories using the [recent stories by section API](https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?query=%7B%22section_ids%22%3A%22%2Fworld%2F%22%2C%22size%22%3A20%2C%22website%22%3A%22reuters%22%7D).
+
+> Note: The `section` or `collection` prop determines which section or collection stories are from.
+>
+> You can get the section ID from the URL for the Reuters.com section pages. For example, the section ID for [World - Europe](https://www.reuters.com/world/europe/) stories at `www.reuters.com/world/europe/` would be `/world/europe/`. (The leading and trailing slashes are required!)
+>
+> You should get the collection alias from the dotcom team.
+
+```svelte
+<script>
+  import { ReferralBlock } from '@reuters-graphics/graphics-components';
+</script>
+
+<ReferralBlock
+  section="/lifestyle/sports/"
+  class="fmy-0"
+  heading="More World Cup coverage"
+/>
+```
+
+<Canvas of={ReferralBlockStories.Demo} />
+
+## Collections
+
+TK - Check if this is still relevant.
+
+```svelte
+<script>
+  import { ReferralBlock } from '@reuters-graphics/graphics-components';
+</script>
+
+<ReferralBlock collection="x-trump" number={6} class="fmy-8" />
+```
+
+<Canvas of={ReferralBlockStories.ByCollection} />
+```
diff --git a/src/components/ReferralBlock/ReferralBlock.stories.svelte b/src/components/ReferralBlock/ReferralBlock.stories.svelte
index f0177b39..966575fd 100644
--- a/src/components/ReferralBlock/ReferralBlock.stories.svelte
+++ b/src/components/ReferralBlock/ReferralBlock.stories.svelte
@@ -1,17 +1,10 @@
 <script module lang="ts">
-  // @ts-ignore raw
-  import componentDocs from './stories/docs/component.md?raw';
-  // @ts-ignore raw
-  import collectionDocs from './stories/docs/collection.md?raw';
-
+  import { defineMeta } from '@storybook/addon-svelte-csf';
   import ReferralBlock from './ReferralBlock.svelte';
 
-  import { withComponentDocs, withStoryDocs } from '$docs/utils/withParams.js';
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Components/Page furniture/ReferralBlock',
     component: ReferralBlock,
-    ...withComponentDocs(componentDocs),
     argTypes: {
       width: {
         control: 'select',
@@ -34,24 +27,13 @@
         options: [2, 4, 6, 8],
       },
     },
-  };
+  });
 </script>
 
-<script>
-  import { Template, Story } from '@storybook/addon-svelte-csf';
-</script>
-
-<Template>
-  {#snippet children({ args })}
-    <ReferralBlock {...args} />
-  {/snippet}
-</Template>
-
 <Story
-  name="Default"
+  name="Demo"
   args={{
     section: '/lifestyle/sports/',
-    number: 4,
     class: 'fmy-0',
     heading: 'More World Cup coverage',
   }}
@@ -59,11 +41,11 @@
 
 <Story
   name="By collection"
+  exportName="ByCollection"
   args={{
     collection: 'x-trump',
     number: 6,
     class: 'fmy-8',
     heading: 'The latest Trump coverage',
   }}
-  {...withStoryDocs(collectionDocs)}
 />
diff --git a/src/components/ReferralBlock/ReferralBlock.svelte b/src/components/ReferralBlock/ReferralBlock.svelte
index f1a4ec3f..f1e49c90 100644
--- a/src/components/ReferralBlock/ReferralBlock.svelte
+++ b/src/components/ReferralBlock/ReferralBlock.svelte
@@ -1,65 +1,70 @@
-<!-- @migration-task Error while migrating Svelte code: Cannot set properties of undefined (setting 'next') -->
 <!-- @component `ReferralBlock` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-page-furniture-referralblock--docs) -->
 <script lang="ts">
-  /** ✏️ DOCUMENT your chart's props using TypeScript and JSDoc comments like below! */
-
-  /**
-   * Section ID, which is often the URL path to the section page on reuters.com.
-   *
-   * Note that not all section pages will be available in the recent stories by section API.
-   */
-  export let section: string | undefined = '/world/';
-
-  /**
-   * Collection alias, as defined in Arc Collections editor.
-   */
-  export let collection: string | undefined;
-
-  /**
-   * Number of referrals to show.
-   * @required
-   */
-  export let number: number = 4;
-
-  /**
-   * Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.
-   */
-  export let linkTarget: string = '_self';
-
-  /**
-   * Add a heading to the referral block.
-   */
-  export let heading: string = '';
-
-  type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
-
-  /**
-   * Width of the component within the text well.
-   * @required
-   */
-  export let width: ContainerWidth = 'wide';
-
-  /** Add an ID to target with SCSS. */
-  export let id: string = '';
-
-  /** Add a class to target with SCSS. */
-  let cls: string = 'fmy-8';
-  export { cls as class };
-
-  import Block from '../Block/Block.svelte';
-
+  // Utils
   import { onMount } from 'svelte';
   import { getTime } from '../SiteHeader/NavBar/NavDropdown/StoryCard/time';
-  import type { Referrals } from './types';
   import { articleIsNotCurrentPage } from './filterCurrentPage';
-  import type { Article } from './types';
 
-  let clientWidth: number;
+  // Components
+  import Block from '../Block/Block.svelte';
+
+  // Types
+  import type { Article } from './types';
+  import type { Referrals } from './types';
+  type ContainerWidth = 'normal' | 'wide' | 'wider' | 'widest' | 'fluid';
+
+  interface Props {
+    /**
+     * Section ID, which is often the URL path to the section page on reuters.com.
+     *
+     * Note that not all section pages will be available in the recent stories by section API.
+     */
+    section?: string;
+    /**
+     * Collection alias, as defined in Arc Collections editor.
+     */
+    collection?: string;
+    /**
+     * Number of referrals to show.
+     */
+    number?: number;
+    /**
+     * Link [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target), e.g., `_blank` or `_parent`.
+     */
+    linkTarget: string;
+    /**
+     * Add a heading to the referral block.
+     */
+    heading: string;
+    /**
+     * Width of the component within the text well: 'normal' | 'wide' | 'wider' | 'widest' | 'fluid'
+     */
+    width?: ContainerWidth;
+    /** Add an ID to target with SCSS. */
+    id?: string;
+    /** Add a class to target with SCSS. */
+    class?: string;
+  }
+
+  let {
+    section = '/world/',
+    collection,
+    number = 4,
+    linkTarget = '_self',
+    heading = '',
+    width = 'wide',
+    id = '',
+    class: cls = 'fmy-8',
+  }: Props = $props();
+
+  let clientWidth = $state(0);
 
   const SECTION_API = 'recent-stories-by-sections-v1';
+
+  /** @TODO - Check if collections alias API still exists*/
   const COLLECTION_API = 'articles-by-collection-alias-or-id-v1';
 
-  let referrals: Article[] = [];
+  let referrals: Article[] = $state([]);
 
   const getReferrals = async () => {
     const isCollection = Boolean(collection);
@@ -76,13 +81,16 @@
             }),
           })
       );
+
       const data = (await response.json()) as Referrals;
+
       const articles = data.result.articles
         .filter((a) => a?.headline_category || a?.kicker?.name)
-        .filter((a) => a?.thumbnail?.renditions?.landscape?.['240w'])
+        .filter((a) => a?.thumbnail?.url)
         .filter((a) => !a?.content?.third_party)
         .filter(articleIsNotCurrentPage)
         .slice(0, number);
+
       referrals = articles;
     } catch {
       console.warn('Unable to fetch referral links.');
@@ -150,9 +158,9 @@
                   <img
                     class="block object-cover m-0 w-full"
                     data-chromatic="ignore"
-                    src={referral.thumbnail.renditions.landscape['240w']}
-                    alt={referral.thumbnail.caption ||
-                      referral.thumbnail.alt_text}
+                    src={referral.thumbnail.url}
+                    alt={referral.thumbnail.alt_text ||
+                      referral.thumbnail.caption}
                   />
                 </div>
               </div>
@@ -165,7 +173,7 @@
 {/if}
 
 <style lang="scss">
-  @use '../../scss/mixins' as *;
+  @use '../../scss/mixins' as mixins;
 
   div.block-container.stacked {
     display: flex;
@@ -198,7 +206,7 @@
       display: block;
       width: calc(50% - 30px);
       max-width: 450px;
-      @include fmy-1;
+      @include mixins.fmy-1;
 
       &:hover {
         .title {
@@ -212,25 +220,25 @@
       .headline {
         display: inline-block;
         width: calc(100% - 9rem);
-        @include fpr-2;
+        @include mixins.fpr-2;
         .kicker {
-          @include text-xxs;
+          @include mixins.text-xxs;
           font-family: Knowledge, sans-serif;
         }
         .title {
-          @include font-medium;
-          @include text-sm;
-          @include text-primary;
+          @include mixins.font-medium;
+          @include mixins.text-sm;
+          @include mixins.text-primary;
           font-family: Knowledge, sans-serif;
         }
         .publish-time {
-          @include text-xxs;
+          @include mixins.text-xxs;
           font-family: Knowledge, sans-serif;
         }
       }
       .image-container {
         border-radius: 0.25rem;
-        border: 1px solid $theme-colour-brand-rules;
+        border: 1px solid mixins.$theme-colour-brand-rules;
         width: 9rem;
         &.xs {
           width: 7rem;
diff --git a/src/components/ReferralBlock/stories/docs/collection.md b/src/components/ReferralBlock/stories/docs/collection.md
deleted file mode 100644
index d582368d..00000000
--- a/src/components/ReferralBlock/stories/docs/collection.md
+++ /dev/null
@@ -1,7 +0,0 @@
-```svelte
-<script>
-  import { ReferralBlock } from '@reuters-graphics/graphics-components';
-</script>
-
-<ReferralBlock collection="x-trump" number="{6}" class="fmy-8" />
-```
diff --git a/src/components/ReferralBlock/stories/docs/component.md b/src/components/ReferralBlock/stories/docs/component.md
deleted file mode 100644
index 61bb9141..00000000
--- a/src/components/ReferralBlock/stories/docs/component.md
+++ /dev/null
@@ -1,15 +0,0 @@
-The `ReferralBlock` component creates a set of referral links from recent dotcom stories using the [recent stories by section API](https://www.reuters.com/pf/api/v3/content/fetch/recent-stories-by-sections-v1?query=%7B%22section_ids%22%3A%22%2Fworld%2F%22%2C%22size%22%3A20%2C%22website%22%3A%22reuters%22%7D) or the [articles by collection API](https://www.reuters.com/pf/api/v3/content/fetch/articles-by-collection-alias-or-id-v1?query=%7B%22collection_alias%22%3A%22x-trump%22%2C%22size%22%3A20%2C%22website%22%3A%22reuters%22%7D).
-
-> The `section` or `collection` prop determines which section or collection stories are from.
->
-> You can get the section ID from the section page on dotcom. For example, the section ID for World - Europe stories at `www.reuters.com/world/europe/` would be `/world/europe/`. (The leading and trailing slashes are required!)
->
-> You should get a collection alias from the dotcom team.
-
-```svelte
-<script>
-  import { ReferralBlock } from '@reuters-graphics/graphics-components';
-</script>
-
-<ReferralBlock section="/lifestyle/sports/" />
-```