diff --git a/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx b/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx
index 82632aa88d9aa..86d3612704ad1 100644
--- a/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx
+++ b/src/content/docs/en/guides/migrate-to-astro/from-nextjs.mdx
@@ -6,8 +6,9 @@ stub: false
 framework: Next.js
 i18nReady: true
 ---
-import AstroJSXTabs from '~/components/tabs/AstroJSXTabs.astro'
-import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
+import { Steps } from '@astrojs/starlight/components';
+import AstroJSXTabs from '~/components/tabs/AstroJSXTabs.astro';
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
 
 Here are some key concepts and migration strategies to help you get started. Use the rest of our docs and our [Discord community](https://astro.build/chat) to keep going!
 
@@ -37,6 +38,7 @@ When you rebuild your Next.js site in Astro, you will notice some important diff
 Each project migration will look different, but there are some common actions you will perform when converting from Next.js to Astro.
 
 ### Create a new Astro project
+
 Use the `create astro` command for your package manager to launch Astro's CLI wizard or choose a community theme from the [Astro Theme Showcase](https://astro.build/themes).
 
 You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters (e.g. `docs`, `blog`, `portfolio`). Or, you can [start a new project from any existing Astro repository on GitHub](/en/install/auto/#starter-templates).
@@ -89,6 +91,7 @@ You may find it useful to install some of [Astro's optional integrations](/en/gu
 
 Following [Astro's project structure](/en/basics/project-structure/):
 
+<Steps>
 1. **Keep** Next's `public/` folder untouched. 
    
     Astro uses the `public/` directory for static assets, just like Next. There is no change needed to this folder, nor its contents.
@@ -96,7 +99,7 @@ Following [Astro's project structure](/en/basics/project-structure/):
 2. **Copy or Move** Next's other files and folders (e.g. `pages`, `styles` etc.) into Astro's `src/` folder as you rebuild your site, following [Astro's project structure](/en/basics/project-structure/).
 
     Like Next, Astro's `src/pages/` folder is a special folder used for file-based routing. All other folders are optional, and you can organize the contents of your `src/` folder any way you like. Other common folders in Astro projects include `src/layouts/`, `src/components`, `src/styles`, `src/scripts`.
-
+</Steps>
 
 ### The Astro config file
 
@@ -110,13 +113,13 @@ Here are some tips for converting a Next `.js` component into a `.astro` compone
 
 2. Change any [Next or JSX syntax to Astro](#reference-convert-nextjs-syntax-to-astro) or to HTML web standards. This includes `<Link>`, `<Script>`, `{children}`, and `className`, for example.
 
-1. Move any necessary JavaScript, including import statements, into a ["code fence" (`---`)](/en/basics/astro-components/#the-component-script). Note: JavaScript to [conditionally render content](/en/basics/astro-syntax/#dynamic-html) is often written inside the HTML template directly in Astro.
+3. Move any necessary JavaScript, including import statements, into a ["code fence" (`---`)](/en/basics/astro-components/#the-component-script). Note: JavaScript to [conditionally render content](/en/basics/astro-syntax/#dynamic-html) is often written inside the HTML template directly in Astro.
 
 4. Use [`Astro.props`](/en/reference/api-reference/#astroprops) to access any additional props that were previously passed to your Next function.
 
-4. Decide whether any imported components also need to be converted to Astro. With the official integration installed, you can [use existing React components in your Astro file](/en/guides/framework-components/). But, you may want to convert them to `.astro` components, especially if they do not need to be interactive!
+5. Decide whether any imported components also need to be converted to Astro. With the official integration installed, you can [use existing React components in your Astro file](/en/guides/framework-components/). But, you may want to convert them to `.astro` components, especially if they do not need to be interactive!
 
-4. Replace `getStaticProps()` with import statements or [`Astro.glob()`](/en/reference/api-reference/#astroglob) to query your local files. Use `fetch()` to fetch external data.
+6. Replace `getStaticProps()` with import statements or [`Astro.glob()`](/en/reference/api-reference/#astroglob) to query your local files. Use `fetch()` to fetch external data.
 
 See [an example of a Next `.js` file converted step-by-step](#guided-example-next-data-fetching-to-astro).
 
@@ -239,22 +242,22 @@ export default class MyDocument extends Document {
   }
 }
 ```
-
+<Steps>
 1. Make a new Astro layout file using only the returned JSX.
 
 2. Replace any React components with `<html>`, `<head>`, `<slot>`, and other HTML standard tags.
 
-
-```astro title="src/layouts/Document.astro"
-<html lang="en">
-	<head>
-	    <link rel="icon" href="/favicon.ico" />
-	</head>
-	<body>
-		<slot/>
-	</body>
-</html>
-```
+    ```astro title="src/layouts/Document.astro"
+    <html lang="en">
+      <head>
+          <link rel="icon" href="/favicon.ico" />
+      </head>
+      <body>
+        <slot/>
+      </body>
+    </html>
+    ```
+</Steps>
 
 #### Migrating from Next.js' `/app` directory
 
@@ -280,20 +283,22 @@ export default function Head() {
 }
 ```
 
+<Steps>
 1. Make a new Astro layout file using only the returned JSX.
 
 2. Replace both these files with a single Astro layout file that contains a page shell (`<html>`, `<head>`, and `<body>` tags) and a `<slot/>` instead of React's `{children}` prop:
 
-```astro title="src/layouts/Layout.astro"
-<html lang="en">
-	<head>
-	    <title>My Page</title>
-	</head>
-	<body>
-		<slot/>
-	</body>
-</html>
-```
+    ```astro title="src/layouts/Layout.astro"
+    <html lang="en">
+      <head>
+          <title>My Page</title>
+      </head>
+      <body>
+        <slot/>
+      </body>
+    </html>
+    ```
+</Steps>
 
 ### Migrating Pages and Posts
 
@@ -434,8 +439,6 @@ In React (`.jsx`) components, use standard JSX image syntax (`<img />`). Astro w
 
 You can learn more about [using images in Astro](/en/guides/images/) in the Images Guide.
 
-
-
 ## Guided example: Next data fetching to Astro
 
 Here is an example of Next.js Pokédex data fetch converted to Astro.
@@ -444,6 +447,7 @@ Here is an example of Next.js Pokédex data fetch converted to Astro.
 
 Here's how to recreate that in `src/pages/index.astro`, replacing `getStaticProps()` with `fetch()`.
 
+<Steps>
 1. Identify the return() JSX.
 
     ```jsx title="pages/index.js" {6-18}
@@ -562,6 +566,7 @@ Here's how to recreate that in `src/pages/index.astro`, replacing `getStaticProp
       </ul>
     </Layout>
     ```
+</Steps>
 
 ## Community Resources