diff --git a/fern/products/sdks/generators/typescript/publishing-to-npm.mdx b/fern/products/sdks/generators/typescript/publishing-to-npm.mdx
index bc78f73e4..c04fa200b 100644
--- a/fern/products/sdks/generators/typescript/publishing-to-npm.mdx
+++ b/fern/products/sdks/generators/typescript/publishing-to-npm.mdx
@@ -38,60 +38,32 @@ Default to OIDC authentication unless the user has a specific reason to use toke
 
 Update your `generators.yml` file to configure the package name, output location, and client naming for npm publishing. Your `generators.yml` [should live in your source repository](/learn/sdks/overview/project-structure) (or on your local machine), not the repository that contains your TypeScript SDK code.
 
-<Steps>
-	<Step title="Configure `output` location">
-
-		In the `group` for your TypeScript SDK, change the output location from `local-file-system` (the default) to `npm` to indicate that Fern should publish your package directly to the npmjs registry:
-
-		```yaml {6-7} title="generators.yml"
-		groups:
-		  ts-sdk: # Group name for your TypeScript SDK
-		    generators:
-		      - name: fern-typescript-sdk
-		        version: <Markdown src="/snippets/version-number-ts.mdx"/>
-		        output:
-		          location: npm
-		```
-
-	</Step>
-
-	<Step title="Add a unique package name">
-
-		Your package name must be unique in the npmjs registry, otherwise publishing your SDK will fail.
-
-		```yaml {8} title="generators.yml"
-		groups:
-		  ts-sdk:
-		    generators:
-		      - name: fern-typescript-sdk
-		        version: <Markdown src="/snippets/version-number-ts.mdx"/>
-		        output:
-		          location: npm
-		          package-name: your-package-name
-		```
-
-	</Step>
-
-	<Step title="Configure `namespaceExport`">
-
-		The `namespaceExport` option controls the name of the generated client. This is the name customers use to import your SDK (`import { your-client-name } from 'your-package-name';`).
-
-		```yaml {9-10} title="generators.yml"
-		groups:
-		  ts-sdk:
-		    generators:
-		      - name: fern-typescript-sdk
-		        version: <Markdown src="/snippets/version-number-ts.mdx"/>
-		        output:
-		          location: npm
-		          package-name: your-package-name
-		        config:
-		          namespaceExport: YourClientName # must be PascalCase
-		```
-
-	</Step>
-
-  </Steps>
+<ScrollWalkthrough layout="wide" panelHeight="18rem">
+  <Step title="Configure `output` location" file="generators.yml" highlight="6-7">
+    In the `group` for your TypeScript SDK, change the output location from `local-file-system` (the default) to `npm` to indicate that Fern should publish your package directly to the npmjs registry.
+  </Step>
+
+  <Step title="Add a unique package name" file="generators.yml" highlight="8">
+    Your package name must be unique in the npmjs registry, otherwise publishing your SDK will fail.
+  </Step>
+
+  <Step title="Configure `namespaceExport`" file="generators.yml" highlight="9-10">
+    The `namespaceExport` option controls the name of the generated client. This is the name customers use to import your SDK (`import { your-client-name } from 'your-package-name';`).
+  </Step>
+
+  ```yaml generators.yml
+  groups:
+    ts-sdk: # Group name for your TypeScript SDK
+      generators:
+        - name: fern-typescript-sdk
+          version: <Markdown src="/snippets/version-number-ts.mdx"/>
+          output:
+            location: npm
+            package-name: your-package-name
+          config:
+            namespaceExport: YourClientName # must be PascalCase
+  ```
+</ScrollWalkthrough>
 
 ## Configure GitHub publishing