diff --git a/src/content/docs/es/tutorial/5-astro-api/3.mdx b/src/content/docs/es/tutorial/5-astro-api/3.mdx
index 8a9a923e01f21..def48a1459678 100644
--- a/src/content/docs/es/tutorial/5-astro-api/3.mdx
+++ b/src/content/docs/es/tutorial/5-astro-api/3.mdx
@@ -11,8 +11,7 @@ import Checklist from '~/components/Checklist.astro';
 import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
 import Option from '~/components/tutorial/Option.astro';
 import PreCheck from '~/components/tutorial/PreCheck.astro';
-
-
+import { Steps } from '@astrojs/starlight/components';
 
 Ahora que tienes páginas individuales para cada etiqueta, ¡es hora de crear enlaces a ellas!
 
@@ -32,6 +31,7 @@ Pero, como ya tienes el directorio `/tags/`, puedes aprovechar otro patrón de e
 
 ## Pruébalo tú mismo: crea una página de índice de etiquetas
 
+<Steps>
 1. Crea un nuevo fichero `index.astro` en el directorio `src/pages/tags/`.
 
 2. Ve a `http://localhost:4321/tags` y comprueba que tu sitio contiene ahora una página en esta URL. Estará vacía, pero existirá.
@@ -40,7 +40,7 @@ Pero, como ya tienes el directorio `/tags/`, puedes aprovechar otro patrón de e
 
     <details>
       <summary>Ampliar para ver los pasos</summary>
-
+      <Steps>
       1. Crea un nuevo componente de página en `src/pages/tags/`.
 
           <details>
@@ -74,10 +74,12 @@ Pero, como ya tienes el directorio `/tags/`, puedes aprovechar otro patrón de e
           <BaseLayout pageTitle={pageTitle}></BaseLayout>
           ```
           </details>
+      </Steps>
     </details>
 
 4. Comprueba de nuevo la vista previa de tu navegador y deberías tener una página formateada, ¡lista para añadirle contenido!
 
+</Steps>
 </Box>
 
 ## Crea un array de etiquetas
@@ -105,8 +107,7 @@ Podrías hacer esto, pero entonces tendrías que volver a este archivo y actuali
 
 Afortunadamente, ya conoces una forma de obtener los datos de todos tus archivos Markdown en una sola línea de código y luego devolver una lista de todas tus etiquetas.
 
-
-
+<Steps>
 1. En `src/pages/tags/index.astro`, añade la línea de código al script frontmatter que dará acceso a tu página a los datos de cada archivo de entrada de blog `.md`.
 
     <details>
@@ -131,11 +132,13 @@ Afortunadamente, ya conoces una forma de obtener los datos de todos tus archivos
     ---
     
     ```
+</Steps>
 
 ## Crea tu lista de etiquetas
 
 En lugar de crear elementos en una lista desordenada esta vez, crea un `<p>` para cada elemento, dentro de un `<div>`. El patrón debería resultarte familiar.
 
+<Steps>
 1. Añade el siguiente código a tu plantilla de componentes:
 
     ```astro title="src/pages/tags/index.astro" ins={2}
@@ -156,9 +159,11 @@ En lugar de crear elementos en una lista desordenada esta vez, crea un `<p>` par
       </div>
     </BaseLayout>
     ```
+</Steps>
 
 ## Añade estilos a tu lista de etiquetas
 
+<Steps>
 1. Añade las siguientes clases CSS para dar estilo a tu `<div>` y a cada `<p>` que se genere. Nota: Astro utiliza sintaxis HTML para añadir nombres de clases.
 
     ```astro title="src/pages/tags/index.astro" 'class="tags"' 'class="tag"'
@@ -196,6 +201,7 @@ En lugar de crear elementos en una lista desordenada esta vez, crea un `<p>` par
     ```
 
 3. Comprueba la vista previa de tu navegador en `http://localhost:4321/tags` para verificar que tienes algunos estilos nuevos y que cada una de las etiquetas de la página tiene un enlace que funciona a su propia página de etiquetas individual.
+</Steps>
 
 ### Registro de códigos
 
@@ -242,6 +248,7 @@ En este momento, puedes navegar a `http://localhost:4321/tags` y ver esta págin
 
 Pero aún así, debes hacer que estas páginas se puedan descubrir desde otras páginas de tu sitio web.
 
+<Steps>
 1. En tu componente `Navigation.astro`, incluye un enlace a esta nueva página de índice de etiquetas.
 
     <details>
@@ -254,6 +261,8 @@ Pero aún así, debes hacer que estas páginas se puedan descubrir desde otras p
     ```
     </details>
 
+</Steps>
+
 <Box icon="puzzle-piece">
 
 ## Reto: Incluye etiquetas en la plantilla de las entradas del blog
@@ -262,49 +271,51 @@ Ya has escrito todo el código que necesitas para mostrar también una lista de
 
 Sigue los pasos que se indican a continuación y comprueba tu trabajo comparándolo con la [muestra de código final](#registro-de-códigos-markdownpostlayout).
 
+<Steps>
 1. Copia el `<div class="tags">...</div>` y `<style>...</style>` de `src/pages/tags/index.astro` y reutilízalo dentro de `MarkdownPostLayout.astro`: 
 
-  ```astro title="src/layouts/MarkdownPostLayout.astro" ins={13-17, 21-40}
-  ---
-  import BaseLayout from './BaseLayout.astro';
-  const { frontmatter } = Astro.props;
-  --- 
-  <BaseLayout pageTitle={frontmatter.title}>
-    <p><em>{frontmatter.description}</em></p>
-    <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
-
-    <p>Escrito por: {frontmatter.author}</p>
-
-    <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} /> 
-
-    <div class="tags">
-      {tags.map((tag) => (
-        <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
-      ))}
-    </div>
-
-    <slot />
-  </BaseLayout>
-  <style>
-    a {
-      color: #00539F;
-    }
+   ```astro title="src/layouts/MarkdownPostLayout.astro" ins={13-17, 21-40}
+   ---
+   import BaseLayout from './BaseLayout.astro';
+   const { frontmatter } = Astro.props;
+   --- 
+   <BaseLayout pageTitle={frontmatter.title}>
+     <p><em>{frontmatter.description}</em></p>
+     <p>{frontmatter.pubDate.toString().slice(0,10)}</p>
+
+     <p>Escrito por: {frontmatter.author}</p>
+
+     <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} /> 
+
+     <div class="tags">
+       {tags.map((tag) => (
+         <p class="tag"><a href={`/tags/${tag}`}>{tag}</a></p>
+       ))}
+     </div>
+
+     <slot />
+   </BaseLayout>
+   <style>
+     a {
+       color: #00539F;
+     }
               
-    .tags {
-      display: flex; 
-      flex-wrap: wrap;  
-    }
-
-    .tag {
-      margin: 0.25em;
-      border: dotted 1px #a1a1a1;
-      border-radius: .5em;
-      padding: .5em 1em;
-      font-size: 1.15em;
-      background-color: #F8FCFD;
-    }
-  </style>
-```
+     .tags {
+       display: flex; 
+       flex-wrap: wrap;  
+     }
+
+     .tag {
+       margin: 0.25em;
+       border: dotted 1px #a1a1a1;
+       border-radius: .5em;
+       padding: .5em 1em;
+       font-size: 1.15em;
+       background-color: #F8FCFD;
+     }
+   </style>
+   ```
+</Steps>
 
 Antes de que este código funcione, necesitas hacer **una pequeña edición** al código que pegaste en `MarkdownPostLayout.astro`. ¿Puedes averiguar cuál es?