diff --git a/src/content/docs/en/guides/cms/datocms.mdx b/src/content/docs/en/guides/cms/datocms.mdx
index da93c91f2b6a4..cdfbc972df9a9 100644
--- a/src/content/docs/en/guides/cms/datocms.mdx
+++ b/src/content/docs/en/guides/cms/datocms.mdx
@@ -6,6 +6,7 @@ stub: false
 service: DatoCMS
 i18nReady: true
 ---
+import { Steps } from '@astrojs/starlight/components';
 import { FileTree } from '@astrojs/starlight/components';
 
 [DatoCMS](https://datocms.com/) is a web-based, headless CMS to manage digital content for your sites and apps.
@@ -38,7 +39,6 @@ interface ImportMetaEnv {
 }
 ```
 
-
 Your root directory should now include these files:
 
 <FileTree title="Project Structure">
@@ -85,7 +85,6 @@ const data = json.data.home;
 ---
 
 <h1>{data.title}</h1>
-
 ```
 
 This GraphQL query will fetch the `title` field in the `home` page from your DatoCMS Project. When you refresh your browser, you should see the title on your page.
@@ -169,10 +168,8 @@ const data = json.data.home;
     }
   })
 }
-
 ```
 
-
 ## Publishing your site
 
 To deploy your website, visit our [deployment guides](/en/guides/deploy/) and follow the instructions for your preferred hosting provider.
@@ -185,17 +182,25 @@ If your project is using Astro’s default static mode, you will need to set up
 
 To set up a webhook in Netlify:
 
+<Steps>
 1. Go to your site dashboard and click on **Build & deploy**.
+
 2. Under the **Continuous Deployment** tab, find the **Build hooks** section and click on **Add build hook**.
+
 3. Provide a name for your webhook and select the branch you want to trigger the build on. Click on **Save** and copy the generated URL.
+</Steps>
 
 ### Vercel
 
 To set up a webhook in Vercel:
 
+<Steps>
 1. Go to your project dashboard and click on **Settings**.
+
 2. Under the **Git** tab, find the **Deploy Hooks** section.
+
 3. Provide a name for your webhook and the branch you want to trigger the build on. Click **Add** and copy the generated URL.
+</Steps>
 
 ### Adding a webhook to DatoCMS