diff --git a/plugins/cost-insights/dev/index.tsx b/plugins/cost-insights/dev/index.tsx
index 4be788427a..622abaffc9 100644
--- a/plugins/cost-insights/dev/index.tsx
+++ b/plugins/cost-insights/dev/index.tsx
@@ -23,7 +23,26 @@ import {
   CostInsightsPage,
   CostInsightsProjectGrowthInstructionsPage,
   CostInsightsLabelDataflowInstructionsPage,
+  EntityCostInsightsContent,
 } from '../src/plugin';
+import { Content, Header, Page } from '@backstage/core-components';
+import { Grid } from '@material-ui/core';
+import { EntityProvider } from '@backstage/plugin-catalog-react';
+import { Entity } from '@backstage/catalog-model';
+
+const mockEntity: Entity = {
+  apiVersion: 'backstage.io/v1alpha1',
+  kind: 'Component',
+  metadata: {
+    name: 'backstage',
+    description: 'backstage.io',
+  },
+  spec: {
+    lifecycle: 'production',
+    type: 'service',
+    owner: 'user:guest',
+  },
+};
 
 createDevApp()
   .registerPlugin(costInsightsPlugin)
@@ -44,4 +63,22 @@ createDevApp()
     title: 'Labelling',
     element: <CostInsightsLabelDataflowInstructionsPage />,
   })
+  .addPage({
+    title: 'Entity',
+    element: (
+      <Page themeId="home">
+        <Header title="Entity" />
+
+        <Content>
+          <Grid container>
+            <Grid item md={12}>
+              <EntityProvider entity={mockEntity}>
+                <EntityCostInsightsContent />
+              </EntityProvider>
+            </Grid>
+          </Grid>
+        </Content>
+      </Page>
+    ),
+  })
   .render();