diff --git a/src/content/docs/en/guides/cms/hygraph.mdx b/src/content/docs/en/guides/cms/hygraph.mdx
index dee8fdec55d13..9d93353c710f7 100644
--- a/src/content/docs/en/guides/cms/hygraph.mdx
+++ b/src/content/docs/en/guides/cms/hygraph.mdx
@@ -5,6 +5,7 @@ type: cms
 service: Hygraph
 i18nReady: true
 ---
+import { Steps } from '@astrojs/starlight/components';
 import { FileTree } from '@astrojs/starlight/components';
 
 [Hygraph](https://hygraph.com/) is a federated content management platform. It exposes a GraphQL endpoint for fetching content.
@@ -110,6 +111,7 @@ const posts: Post[] = json.data.blogPosts;
 
 To set up a webhook in Netlify:
 
+<Steps>
 1. Deploy your site to Netlify with [this guide](/en/guides/deploy/netlify/). Remember to add your `HYGRAPH_ENDPOINT` to the environment variables.
 
 2. Then Go to your Hygraph project dashboard and click on **Apps**. 
@@ -117,6 +119,7 @@ To set up a webhook in Netlify:
 3. Go to the marketplace and search for Netlify and follow the instructions provided.
 
 4. If all went good, now you can deploy your website with a click in the Hygraph interface.
+</Steps>
 
 ## Community Resources