diff --git a/src/content/docs/en/recipes/dynamically-importing-images.mdx b/src/content/docs/en/recipes/dynamically-importing-images.mdx
index e703557e87bcb..c08d179f8fef3 100644
--- a/src/content/docs/en/recipes/dynamically-importing-images.mdx
+++ b/src/content/docs/en/recipes/dynamically-importing-images.mdx
@@ -4,6 +4,7 @@ description: Learn how to dynamically import images using Vite's import.meta.glo
 i18nReady: true
 type: recipe
 ---
+import { Steps } from '@astrojs/starlight/components';
 import { FileTree } from '@astrojs/starlight/components';
 
 Local [images](/en/guides/images/) must be imported into `.astro` files in order to display them. There will be times where you will want or need to dynamically import the image paths of your images instead of explicitly importing each individual image.
@@ -12,6 +13,7 @@ In this recipe, you will learn how to dynamically import your images using Vite'
 
 ## Recipe
 
+<Steps>
 1. Create a new `assets` folder under the `src` directory and add your images inside that new folder. 
 
     <FileTree>
@@ -150,5 +152,4 @@ In this recipe, you will learn how to dynamically import your images using Vite'
         age={25}
     />
     ```
-
-
+</Steps>