diff --git a/docs/data/material/getting-started/installation/installation.md b/docs/data/material/getting-started/installation/installation.md
index 6c342b75c5313d..6555661ec25f0f 100644
--- a/docs/data/material/getting-started/installation/installation.md
+++ b/docs/data/material/getting-started/installation/installation.md
@@ -18,14 +18,14 @@ The `next` tag is used to download the latest <b>pre-release</b>, v6 version. Re
 npm install @mui/material@next @emotion/react @emotion/styled
 ```
 
-```bash yarn
-yarn add @mui/material@next @emotion/react @emotion/styled
-```
-
 ```bash pnpm
 pnpm add @mui/material@next @emotion/react @emotion/styled
 ```
 
+```bash yarn
+yarn add @mui/material@next @emotion/react @emotion/styled
+```
+
 </codeblock>
 
 ### Peer dependencies
@@ -52,14 +52,14 @@ If you want to use [styled-components](https://styled-components.com/) instead,
 npm install @mui/material @mui/styled-engine-sc styled-components
 ```
 
-```bash yarn
-yarn add @mui/material @mui/styled-engine-sc styled-components
-```
-
 ```bash pnpm
 pnpm add @mui/material @mui/styled-engine-sc styled-components
 ```
 
+```bash yarn
+yarn add @mui/material @mui/styled-engine-sc styled-components
+```
+
 </codeblock>
 
 Next, follow the [styled-components how-to guide](/material-ui/integrations/styled-components/) to properly configure your bundler to support `@mui/styled-engine-sc`.
@@ -83,13 +83,14 @@ Add it to your project via Fontsource, or with the Google Fonts CDN.
 npm install @fontsource/roboto
 ```
 
+```bash pnpm
+pnpm add @fontsource/roboto
+```
+
 ```bash yarn
 yarn add @fontsource/roboto
 ```
 
-```bash pnpm
-pnpm add @fontsource/roboto
-```
 
 </codeblock>
 
@@ -130,13 +131,14 @@ You can do so with npm, or with the Google Web Fonts CDN.
 npm install @mui/icons-material
 ```
 
+```bash pnpm
+pnpm add @mui/icons-material
+```
+
 ```bash yarn
 yarn add @mui/icons-material
 ```
 
-```bash pnpm
-pnpm add @mui/icons-material
-```
 
 </codeblock>