diff --git a/docs/tutorial/part-two/index.md b/docs/tutorial/part-two/index.md
index 439e51212509a..ddf3936763b52 100644
--- a/docs/tutorial/part-two/index.md
+++ b/docs/tutorial/part-two/index.md
@@ -254,10 +254,8 @@ The `console.log(styles)` code will log the resulting import so you can see the
 
 If you compare that to your CSS file, you'll see that each class is now a key in the imported object pointing to a long string e.g. `avatar` points to `src-pages----about-css-modules-module---avatar---2lRF7`. These are the class names CSS Modules generates. They're guaranteed to be unique across your site. And because you have to import them to use the classes, there's never any question about where some CSS is being used.
 
-4. Create a `User` component.
-
-Create a new `<User />` component inline in the `about-css-modules.js` page
-component. Modify `about-css-modules.js` so it looks like the following:
+4. Create a new `<User />` component inline in the `about-css-modules.js` page
+   component. Modify `about-css-modules.js` so it looks like the following:
 
 ```jsx:title=src/pages/about-css-modules.js
 import React from "react"