diff --git a/plugins/sonarqube/dev/index.tsx b/plugins/sonarqube/dev/index.tsx
index 5e8aedd577..b99e552df9 100644
--- a/plugins/sonarqube/dev/index.tsx
+++ b/plugins/sonarqube/dev/index.tsx
@@ -22,14 +22,60 @@ import {
   Header,
   Page,
 } from '@backstage/core';
-import { createDevApp } from '@backstage/dev-utils';
+import { createDevApp, EntityGridItem } from '@backstage/dev-utils';
 import { Grid } from '@material-ui/core';
 import React from 'react';
-import { SonarQubeCard } from '../src';
+import { EntitySonarQubeCard, sonarQubePlugin } from '../src';
 import { FindingSummary, SonarQubeApi, sonarQubeApiRef } from '../src/api';
 import { SONARQUBE_PROJECT_KEY_ANNOTATION } from '../src/components/useProjectKey';
 
+const entity = (name?: string) =>
+  ({
+    apiVersion: 'backstage.io/v1alpha1',
+    kind: 'Component',
+    metadata: {
+      annotations: {
+        [SONARQUBE_PROJECT_KEY_ANNOTATION]: name,
+      },
+      name: name,
+    },
+  } as Entity);
+
 createDevApp()
+  .registerPlugin(sonarQubePlugin)
+  .addPage({
+    title: 'Cards',
+    element: (
+      <Page themeId="home">
+        <Header title="SonarQube" />
+        <Content>
+          <Grid container>
+            <EntityGridItem xs={12} md={6} entity={entity('empty')}>
+              <EntitySonarQubeCard />
+            </EntityGridItem>
+            <EntityGridItem xs={12} md={6} entity={entity('error')}>
+              <EntitySonarQubeCard />
+            </EntityGridItem>
+            <EntityGridItem xs={12} md={6} entity={entity('never')}>
+              <EntitySonarQubeCard />
+            </EntityGridItem>
+            <EntityGridItem xs={12} md={6} entity={entity('not-computed')}>
+              <EntitySonarQubeCard />
+            </EntityGridItem>
+            <EntityGridItem xs={12} md={6} entity={entity('failed')}>
+              <EntitySonarQubeCard />
+            </EntityGridItem>
+            <EntityGridItem xs={12} md={6} entity={entity('passed')}>
+              <EntitySonarQubeCard />
+            </EntityGridItem>
+            <EntityGridItem xs={12} entity={entity(undefined)}>
+              <EntitySonarQubeCard />
+            </EntityGridItem>
+          </Grid>
+        </Content>
+      </Page>
+    ),
+  })
   .registerApi({
     api: sonarQubeApiRef,
     deps: {},
@@ -114,58 +160,4 @@ createDevApp()
         },
       } as SonarQubeApi),
   })
-  .registerPlugin(
-    createPlugin({
-      id: 'defectdojo-demo',
-      register({ router }) {
-        const entity = (name?: string) =>
-          ({
-            apiVersion: 'backstage.io/v1alpha1',
-            kind: 'Component',
-            metadata: {
-              annotations: {
-                [SONARQUBE_PROJECT_KEY_ANNOTATION]: name,
-              },
-              name: name,
-            },
-          } as Entity);
-
-        const ExamplePage = () => (
-          <Page themeId="home">
-            <Header title="SonarQube" />
-            <Content>
-              <Grid container>
-                <Grid item xs={12} sm={6} md={4}>
-                  <SonarQubeCard entity={entity('empty')} />
-                </Grid>
-                <Grid item xs={12} sm={6} md={4}>
-                  <SonarQubeCard entity={entity('error')} />
-                </Grid>
-                <Grid item xs={12} sm={6} md={4}>
-                  <SonarQubeCard entity={entity('never')} />
-                </Grid>
-                <Grid item xs={12} sm={6} md={4}>
-                  <SonarQubeCard entity={entity('not-computed')} />
-                </Grid>
-                <Grid item xs={12} sm={6} md={4}>
-                  <SonarQubeCard entity={entity('failed')} />
-                </Grid>
-                <Grid item xs={12} sm={6} md={4}>
-                  <SonarQubeCard entity={entity('passed')} />
-                </Grid>
-                <Grid item xs={12}>
-                  <SonarQubeCard entity={entity(undefined)} />
-                </Grid>
-              </Grid>
-            </Content>
-          </Page>
-        );
-
-        router.addRoute(
-          createRouteRef({ path: '/', title: 'SonarQube' }),
-          ExamplePage,
-        );
-      },
-    }),
-  )
   .render();
diff --git a/plugins/sonarqube/package.json b/plugins/sonarqube/package.json
index b6701f9849..c286dd9dac 100644
--- a/plugins/sonarqube/package.json
+++ b/plugins/sonarqube/package.json
@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@backstage/catalog-model": "^0.7.0",
+    "@backstage/plugin-catalog-react": "^0.0.1",
     "@backstage/core": "^0.5.0",
     "@backstage/theme": "^0.2.2",
     "@material-ui/core": "^4.11.0",
diff --git a/plugins/sonarqube/src/components/SonarQubeCard/SonarQubeCard.tsx b/plugins/sonarqube/src/components/SonarQubeCard/SonarQubeCard.tsx
index c5e295a22b..5577048fa9 100644
--- a/plugins/sonarqube/src/components/SonarQubeCard/SonarQubeCard.tsx
+++ b/plugins/sonarqube/src/components/SonarQubeCard/SonarQubeCard.tsx
@@ -22,6 +22,7 @@ import {
   Progress,
   useApi,
 } from '@backstage/core';
+import { useEntity } from '@backstage/plugin-catalog-react';
 import { Chip, Grid } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import BugReport from '@material-ui/icons/BugReport';
@@ -69,10 +70,10 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-interface DuplicationRating {
+type DuplicationRating = {
   greaterThan: number;
   rating: '1.0' | '2.0' | '3.0' | '4.0' | '5.0';
-}
+};
 
 const defaultDuplicationRatings: DuplicationRating[] = [
   { greaterThan: 0, rating: '1.0' },
@@ -83,14 +84,14 @@ const defaultDuplicationRatings: DuplicationRating[] = [
 ];
 
 export const SonarQubeCard = ({
-  entity,
   variant = 'gridItem',
   duplicationRatings = defaultDuplicationRatings,
 }: {
-  entity: Entity;
+  entity?: Entity;
   variant?: string;
   duplicationRatings?: DuplicationRating[];
 }) => {
+  const { entity } = useEntity();
   const sonarQubeApi = useApi(sonarQubeApiRef);
 
   const projectTitle = useProjectKey(entity);
diff --git a/plugins/sonarqube/src/index.ts b/plugins/sonarqube/src/index.ts
index f09aeb1038..8fae151929 100644
--- a/plugins/sonarqube/src/index.ts
+++ b/plugins/sonarqube/src/index.ts
@@ -15,4 +15,8 @@
  */
 
 export * from './components';
-export { plugin } from './plugin';
+export {
+  sonarQubePlugin,
+  sonarQubePlugin as plugin,
+  EntitySonarQubeCard,
+} from './plugin';
diff --git a/plugins/sonarqube/src/plugin.test.ts b/plugins/sonarqube/src/plugin.test.ts
index 32730b64c3..246f8b297e 100644
--- a/plugins/sonarqube/src/plugin.test.ts
+++ b/plugins/sonarqube/src/plugin.test.ts
@@ -14,10 +14,10 @@
  * limitations under the License.
  */
 
-import { plugin } from './plugin';
+import { sonarQubePlugin } from './plugin';
 
 describe('sonarqube', () => {
   it('should export plugin', () => {
-    expect(plugin).toBeDefined();
+    expect(sonarQubePlugin).toBeDefined();
   });
 });
diff --git a/plugins/sonarqube/src/plugin.ts b/plugins/sonarqube/src/plugin.ts
index f8b8cafc5c..3f58b24abf 100644
--- a/plugins/sonarqube/src/plugin.ts
+++ b/plugins/sonarqube/src/plugin.ts
@@ -17,12 +17,13 @@
 import {
   configApiRef,
   createApiFactory,
+  createComponentExtension,
   createPlugin,
   discoveryApiRef,
 } from '@backstage/core';
 import { sonarQubeApiRef, SonarQubeClient } from './api';
 
-export const plugin = createPlugin({
+export const sonarQubePlugin = createPlugin({
   id: 'sonarqube',
   apis: [
     createApiFactory({
@@ -36,3 +37,12 @@ export const plugin = createPlugin({
     }),
   ],
 });
+
+export const EntitySonarQubeCard = sonarQubePlugin.provide(
+  createComponentExtension({
+    component: {
+      lazy: () =>
+        import('./components/SonarQubeCard').then(m => m.SonarQubeCard),
+    },
+  }),
+);