diff --git a/src/content/docs/en/recipes/external-links.mdx b/src/content/docs/en/recipes/external-links.mdx
index 77369e197fb21..678869369b3d5 100644
--- a/src/content/docs/en/recipes/external-links.mdx
+++ b/src/content/docs/en/recipes/external-links.mdx
@@ -4,16 +4,18 @@ description: Learn how to install a rehype plugin to add icons to external links
 i18nReady: true
 type: recipe
 ---
-
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import { Steps } from '@astrojs/starlight/components';
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 
 Using a rehype plugin, you can identify and modify links in your Markdown files that point to external sites. This example adds icons to the end of each external link, so that visitors will know they are leaving your site.
 
 ## Prerequisites
+
 - An Astro project using Markdown for content pages.
 
 ## Recipe
 
+<Steps>
 1. Install the `rehype-external-links` plugin.
 
     <PackageManagerTabs>
@@ -56,10 +58,12 @@ Using a rehype plugin, you can identify and modify links in your Markdown files
       },
     });
     ```
+  
+    :::note
+      The value of the `content` property is [not represented in the accessibility tree](https://developer.mozilla.org/en-US/docs/Web/CSS/content#accessibility_concerns). As such, it's best to make clear that the link is external in the surrounding content, rather than relying on the icon alone.
+    :::
+</Steps>
 
-:::note
-  The value of the `content` property is [not represented in the accessibility tree](https://developer.mozilla.org/en-US/docs/Web/CSS/content#accessibility_concerns). As such, it's best to make clear that the link is external in the surrounding content, rather than relying on the icon alone.
-:::
 
 ## Resources
 - [rehype-external-links](https://www.npmjs.com/package/rehype-external-links)