diff --git a/plugins/scaffolder/dev/index.tsx b/plugins/scaffolder/dev/index.tsx
index 812a5585d4..eff16ab0f5 100644
--- a/plugins/scaffolder/dev/index.tsx
+++ b/plugins/scaffolder/dev/index.tsx
@@ -14,7 +14,32 @@
  * limitations under the License.
  */
 
+import React from 'react';
 import { createDevApp } from '@backstage/dev-utils';
-import { plugin } from '../src/plugin';
+import { discoveryApiRef } from '@backstage/core';
+import { CatalogClient } from '@backstage/catalog-client';
+import { catalogApiRef } from '@backstage/plugin-catalog-react';
+import { TemplateIndexPage, TemplatePage } from '../src/plugin';
+import { ScaffolderApi, scaffolderApiRef } from '../src';
 
-createDevApp().registerPlugin(plugin).render();
+createDevApp()
+  .registerApi({
+    api: catalogApiRef,
+    deps: { discoveryApi: discoveryApiRef },
+    factory: ({ discoveryApi }) => new CatalogClient({ discoveryApi }),
+  })
+  .registerApi({
+    api: scaffolderApiRef,
+    deps: { discoveryApi: discoveryApiRef },
+    factory: ({ discoveryApi }) => new ScaffolderApi({ discoveryApi }),
+  })
+  .addPage({
+    path: '/create',
+    title: 'Create',
+    element: <TemplateIndexPage />,
+  })
+  .addPage({
+    path: '/create/:templateName',
+    element: <TemplatePage />,
+  })
+  .render();
diff --git a/plugins/scaffolder/package.json b/plugins/scaffolder/package.json
index d174991bb7..69021953a2 100644
--- a/plugins/scaffolder/package.json
+++ b/plugins/scaffolder/package.json
@@ -54,6 +54,7 @@
     "@backstage/cli": "^0.5.0",
     "@backstage/dev-utils": "^0.1.8",
     "@backstage/test-utils": "^0.1.6",
+    "@backstage/catalog-client": "^0.3.5",
     "@testing-library/jest-dom": "^5.10.1",
     "@testing-library/react": "^10.4.1",
     "@testing-library/user-event": "^12.0.7",
diff --git a/plugins/scaffolder/src/index.ts b/plugins/scaffolder/src/index.ts
index f0fdf5b429..5f102e7853 100644
--- a/plugins/scaffolder/src/index.ts
+++ b/plugins/scaffolder/src/index.ts
@@ -14,6 +14,11 @@
  * limitations under the License.
  */
 
-export { plugin } from './plugin';
+export {
+  scaffolderPlugin,
+  scaffolderPlugin as plugin,
+  TemplateIndexPage,
+  TemplatePage,
+} from './plugin';
 export { ScaffolderApi, scaffolderApiRef } from './api';
 export { rootRoute, templateRoute } from './routes';
diff --git a/plugins/scaffolder/src/plugin.test.ts b/plugins/scaffolder/src/plugin.test.ts
index 3b4c92168d..03dd9fe465 100644
--- a/plugins/scaffolder/src/plugin.test.ts
+++ b/plugins/scaffolder/src/plugin.test.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { plugin } from './plugin';
+import { scaffolderPlugin } from './plugin';
 
 describe('scaffolder', () => {
   it('should export plugin', () => {
-    expect(plugin).toBeDefined();
+    expect(scaffolderPlugin).toBeDefined();
   });
 });
diff --git a/plugins/scaffolder/src/plugin.ts b/plugins/scaffolder/src/plugin.ts
index 41f7a03249..ed20705185 100644
--- a/plugins/scaffolder/src/plugin.ts
+++ b/plugins/scaffolder/src/plugin.ts
@@ -18,13 +18,14 @@ import {
   createPlugin,
   createApiFactory,
   discoveryApiRef,
+  createRoutableExtension,
 } from '@backstage/core';
-import { ScaffolderPage } from './components/ScaffolderPage';
-import { TemplatePage } from './components/TemplatePage';
+import { ScaffolderPage as ScaffolderPageComponent } from './components/ScaffolderPage';
+import { TemplatePage as TemplatePageComponent } from './components/TemplatePage';
 import { rootRoute, templateRoute } from './routes';
 import { scaffolderApiRef, ScaffolderApi } from './api';
 
-export const plugin = createPlugin({
+export const scaffolderPlugin = createPlugin({
   id: 'scaffolder',
   apis: [
     createApiFactory({
@@ -34,7 +35,27 @@ export const plugin = createPlugin({
     }),
   ],
   register({ router }) {
-    router.addRoute(rootRoute, ScaffolderPage);
-    router.addRoute(templateRoute, TemplatePage);
+    router.addRoute(rootRoute, ScaffolderPageComponent);
+    router.addRoute(templateRoute, TemplatePageComponent);
+  },
+  routes: {
+    templateIndex: rootRoute,
+    template: templateRoute,
   },
 });
+
+export const TemplateIndexPage = scaffolderPlugin.provide(
+  createRoutableExtension({
+    component: () =>
+      import('./components/ScaffolderPage').then(m => m.ScaffolderPage),
+    mountPoint: rootRoute,
+  }),
+);
+
+export const TemplatePage = scaffolderPlugin.provide(
+  createRoutableExtension({
+    component: () =>
+      import('./components/TemplatePage').then(m => m.TemplatePage),
+    mountPoint: templateRoute,
+  }),
+);
diff --git a/plugins/scaffolder/src/routes.ts b/plugins/scaffolder/src/routes.ts
index 28c77f29a6..8efd1d3aaf 100644
--- a/plugins/scaffolder/src/routes.ts
+++ b/plugins/scaffolder/src/routes.ts
@@ -16,12 +16,11 @@
 import { createRouteRef } from '@backstage/core';
 
 export const rootRoute = createRouteRef({
-  icon: () => null,
   path: '/create',
   title: 'Create new entity',
 });
+
 export const templateRoute = createRouteRef({
-  icon: () => null,
   path: '/create/:templateName',
   title: 'Entity creation',
 });