diff --git a/plugins/devtools/README.md b/plugins/devtools/README.md
index b23c35d4dd..54aa1f492d 100644
--- a/plugins/devtools/README.md
+++ b/plugins/devtools/README.md
@@ -66,42 +66,14 @@ You need to setup the [DevTools backend plugin](../devtools-backend/README.md) b
 
 ### Frontend
 
-To setup the DevTools frontend you'll need to do the following steps:
+Install the `@backstage/plugin-devtools` package in your frontend app:
 
-1. First we need to add the `@backstage/plugin-devtools` package to your frontend app:
+```sh
+# From your Backstage root directory
+yarn --cwd packages/app add @backstage/plugin-devtools
+```
 
-   ```sh
-   # From your Backstage root directory
-   yarn --cwd packages/app add @backstage/plugin-devtools
-   ```
-
-2. Now open the `packages/app/src/App.tsx` file
-3. Then after all the import statements add the following line:
-
-   ```ts
-   import { DevToolsPage } from '@backstage/plugin-devtools';
-   ```
-
-4. In this same file just before the closing `</ FlatRoutes>`, this will be near the bottom of the file, add this line:
-
-   ```ts
-   <Route path="/devtools" element={<DevToolsPage />} />
-   ```
-
-5. Next open the `packages/app/src/components/Root/Root.tsx` file
-6. We want to add this icon import after all the existing import statements:
-
-   ```ts
-   import BuildIcon from '@material-ui/icons/Build';
-   ```
-
-7. Then add this line just after the `<SidebarSettings />` line:
-
-   ```ts
-   <SidebarItem icon={BuildIcon} to="devtools" text="DevTools" />
-   ```
-
-8. Now run `yarn start` from the root of your project and you should see the DevTools option show up just below Settings in your sidebar and clicking on it will get you to the [Info tab](#info)
+Once installed, the plugin is automatically available in your app through the default package discovery. For more details and alternative installation methods, see [installing plugins](https://backstage.io/docs/frontend-system/building-apps/installing-plugins).
 
 ## Customizing
 
@@ -166,8 +138,6 @@ You can also add tabs to show content from other plugins that fit well with the
 
 #### Catalog Unprocessed Entities Tab
 
-##### New Frontend System
-
 Create an extension and/or load a 3rd party extension to add additional tabs.
 
 ```shell
@@ -197,7 +167,7 @@ const appFeature = createFrontendModule({
 });
 ```
 
-##### Old System
+##### Old Frontend System
 
 Here's how to add the Catalog Unprocessed Entities tab:
 
@@ -230,6 +200,38 @@ Here's how to add the Catalog Unprocessed Entities tab:
 
 4. Now run `yarn start` and navigate to the DevTools you'll see a new tab for Unprocessed Entities
 
+## Old Frontend System
+
+If your Backstage app uses the old frontend system, you need to manually wire the plugin into your app.
+
+1. Open the `packages/app/src/App.tsx` file
+2. Then after all the import statements add the following line:
+
+   ```ts
+   import { DevToolsPage } from '@backstage/plugin-devtools';
+   ```
+
+3. In this same file just before the closing `</ FlatRoutes>`, this will be near the bottom of the file, add this line:
+
+   ```ts
+   <Route path="/devtools" element={<DevToolsPage />} />
+   ```
+
+4. Next open the `packages/app/src/components/Root/Root.tsx` file
+5. We want to add this icon import after all the existing import statements:
+
+   ```ts
+   import BuildIcon from '@material-ui/icons/Build';
+   ```
+
+6. Then add this line just after the `<SidebarSettings />` line:
+
+   ```ts
+   <SidebarItem icon={BuildIcon} to="devtools" text="DevTools" />
+   ```
+
+7. Now run `yarn start` from the root of your project and you should see the DevTools option show up just below Settings in your sidebar and clicking on it will get you to the [Info tab](#info)
+
 ## Permissions
 
 The DevTools plugin supports the [permissions framework](https://backstage.io/docs/permissions/overview), the following sections outline how you can use them with the assumption that you have the permissions framework setup and working.