diff --git a/src/content/docs/en/guides/cms/buttercms.mdx b/src/content/docs/en/guides/cms/buttercms.mdx
index ab75fbddc1c27..37f54260cd16c 100644
--- a/src/content/docs/en/guides/cms/buttercms.mdx
+++ b/src/content/docs/en/guides/cms/buttercms.mdx
@@ -6,10 +6,9 @@ service: ButterCMS
 stub: false
 i18nReady: true
 ---
+import { Steps } from '@astrojs/starlight/components';
 import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
 
-
-
 [ButterCMS](https://buttercms.com/) is a headless CMS and blog engine that allows you to publish structured content to use in your project.
 
 ## Integrating with Astro
@@ -28,6 +27,7 @@ To get started, you will need to have the following:
 
 ### Setup
 
+<Steps>
 1. Create a `.env` file in the root of your project and add your API token as an environment variable:
 
     ```ini title=".env"
@@ -64,6 +64,7 @@ To get started, you will need to have the following:
 
     export const butterClient = Butter(import.meta.env.BUTTER_TOKEN);
     ```
+</Steps>
 
 **This authenticates the SDK using your API Token and exports it to be used across your project.**