diff --git a/plugins/opencost/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx b/plugins/opencost/src/components/OpenCostFetchComponent/OpenCostFetchComponent.test.tsx
similarity index 88%
rename from plugins/opencost/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx
rename to plugins/opencost/src/components/OpenCostFetchComponent/OpenCostFetchComponent.test.tsx
index a714f640da..0537e056fd 100644
--- a/plugins/opencost/src/components/ExampleFetchComponent/ExampleFetchComponent.test.tsx
+++ b/plugins/opencost/src/components/OpenCostFetchComponent/OpenCostFetchComponent.test.tsx
@@ -15,12 +15,12 @@
  */
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { ExampleFetchComponent } from './ExampleFetchComponent';
+import { OpenCostFetchComponent } from './OpenCostFetchComponent';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { setupRequestMockHandlers } from '@backstage/test-utils';
 
-describe('ExampleFetchComponent', () => {
+describe('OpenCostFetchComponent', () => {
   const server = setupServer();
   // Enable sane handlers for network requests
   setupRequestMockHandlers(server);
@@ -34,7 +34,7 @@ describe('ExampleFetchComponent', () => {
     );
   });
   it('should render', async () => {
-    await render(<ExampleFetchComponent />);
+    await render(<OpenCostFetchComponent />);
     expect(await screen.findByTestId('progress')).toBeInTheDocument();
   });
 });
diff --git a/plugins/opencost/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx b/plugins/opencost/src/components/OpenCostFetchComponent/OpenCostFetchComponent.tsx
similarity index 98%
rename from plugins/opencost/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx
rename to plugins/opencost/src/components/OpenCostFetchComponent/OpenCostFetchComponent.tsx
index c3403e1923..80db2be5e1 100644
--- a/plugins/opencost/src/components/ExampleFetchComponent/ExampleFetchComponent.tsx
+++ b/plugins/opencost/src/components/OpenCostFetchComponent/OpenCostFetchComponent.tsx
@@ -93,7 +93,7 @@ export const DenseTable = ({ users }: DenseTableProps) => {
   );
 };
 
-export const ExampleFetchComponent = () => {
+export const OpenCostFetchComponent = () => {
   const { fetch } = useApi(fetchApiRef);
   const { value, loading, error } = useAsync(async (): Promise<User[]> => {
     const response = await fetch('https://randomuser.me/api/?results=20');
diff --git a/plugins/opencost/src/components/ExampleFetchComponent/index.ts b/plugins/opencost/src/components/OpenCostFetchComponent/index.ts
similarity index 90%
rename from plugins/opencost/src/components/ExampleFetchComponent/index.ts
rename to plugins/opencost/src/components/OpenCostFetchComponent/index.ts
index 9644c904ea..91c904e5e7 100644
--- a/plugins/opencost/src/components/ExampleFetchComponent/index.ts
+++ b/plugins/opencost/src/components/OpenCostFetchComponent/index.ts
@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { ExampleFetchComponent } from './ExampleFetchComponent';
+export { OpenCostFetchComponent } from './OpenCostFetchComponent';
diff --git a/plugins/opencost/src/components/ExampleComponent/ExampleComponent.test.tsx b/plugins/opencost/src/components/OpenCostPage/OpenCostPage.test.tsx
similarity index 89%
rename from plugins/opencost/src/components/ExampleComponent/ExampleComponent.test.tsx
rename to plugins/opencost/src/components/OpenCostPage/OpenCostPage.test.tsx
index 77c1dd610c..99f7d51cc3 100644
--- a/plugins/opencost/src/components/ExampleComponent/ExampleComponent.test.tsx
+++ b/plugins/opencost/src/components/OpenCostPage/OpenCostPage.test.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 import React from 'react';
-import { ExampleComponent } from './ExampleComponent';
+import { OpenCostPage } from './OpenCostPage';
 import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { screen } from '@testing-library/react';
@@ -23,7 +23,7 @@ import {
   renderInTestApp,
 } from '@backstage/test-utils';
 
-describe('ExampleComponent', () => {
+describe('OpenCostPage', () => {
   const server = setupServer();
   // Enable sane handlers for network requests
   setupRequestMockHandlers(server);
@@ -36,7 +36,7 @@ describe('ExampleComponent', () => {
   });
 
   it('should render', async () => {
-    await renderInTestApp(<ExampleComponent />);
+    await renderInTestApp(<OpenCostPage />);
     expect(screen.getByText('Welcome to OpenCost!')).toBeInTheDocument();
   });
 });
diff --git a/plugins/opencost/src/components/ExampleComponent/ExampleComponent.tsx b/plugins/opencost/src/components/OpenCostPage/OpenCostPage.tsx
similarity index 54%
rename from plugins/opencost/src/components/ExampleComponent/ExampleComponent.tsx
rename to plugins/opencost/src/components/OpenCostPage/OpenCostPage.tsx
index fbeba9305a..faf3ca1a49 100644
--- a/plugins/opencost/src/components/ExampleComponent/ExampleComponent.tsx
+++ b/plugins/opencost/src/components/OpenCostPage/OpenCostPage.tsx
@@ -16,37 +16,33 @@
 import React from 'react';
 import { Typography, Grid } from '@material-ui/core';
 import {
-  InfoCard,
   Header,
   Page,
   Content,
   ContentHeader,
-  HeaderLabel,
-  SupportButton,
 } from '@backstage/core-components';
-import { ExampleFetchComponent } from '../ExampleFetchComponent';
+import { OpenCostFetchComponent } from '../OpenCostFetchComponent';
 
-export const ExampleComponent = () => (
+export const OpenCostPage = () => (
   <Page themeId="tool">
-    <Header title="Welcome to OpenCost!" subtitle="Optional subtitle">
-      <img src={require('../../images/logo.png')} alt="OpenCost" />
-      <HeaderLabel label="Owner" value="Team X" />
-      <HeaderLabel label="Lifecycle" value="Alpha" />
+    <Header
+      title="OpenCost"
+      subtitle="Open source Kubernetes cloud cost monitoring"
+    >
+      <a href="https://opencost.io">
+        <img
+          width={68}
+          height={64}
+          src={require('../../images/pig.png')}
+          alt="OpenCost"
+        />
+      </a>
     </Header>
     <Content>
-      <ContentHeader title="Plugin title">
-        <SupportButton>A description of your plugin goes here.</SupportButton>
-      </ContentHeader>
+      <ContentHeader title="Namespaces " />
       <Grid container spacing={3} direction="column">
         <Grid item>
-          <InfoCard title="Information card">
-            <Typography variant="body1">
-              All content should be wrapped in a card like this.
-            </Typography>
-          </InfoCard>
-        </Grid>
-        <Grid item>
-          <ExampleFetchComponent />
+          <OpenCostFetchComponent />
         </Grid>
       </Grid>
     </Content>
diff --git a/plugins/opencost/src/components/ExampleComponent/index.ts b/plugins/opencost/src/components/OpenCostPage/index.ts
similarity index 91%
rename from plugins/opencost/src/components/ExampleComponent/index.ts
rename to plugins/opencost/src/components/OpenCostPage/index.ts
index 7e520a7ab8..f966c83a30 100644
--- a/plugins/opencost/src/components/ExampleComponent/index.ts
+++ b/plugins/opencost/src/components/OpenCostPage/index.ts
@@ -13,4 +13,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export { ExampleComponent } from './ExampleComponent';
+export { OpenCostPage } from './OpenCostPage';
diff --git a/plugins/opencost/src/images/logo.png b/plugins/opencost/src/images/logo.png
deleted file mode 100644
index 34fdda4c61..0000000000
Binary files a/plugins/opencost/src/images/logo.png and /dev/null differ
diff --git a/plugins/opencost/src/images/pig.png b/plugins/opencost/src/images/pig.png
new file mode 100644
index 0000000000..14fe563941
Binary files /dev/null and b/plugins/opencost/src/images/pig.png differ
diff --git a/plugins/opencost/src/plugin.ts b/plugins/opencost/src/plugin.ts
index 6a97175770..edaa04d595 100644
--- a/plugins/opencost/src/plugin.ts
+++ b/plugins/opencost/src/plugin.ts
@@ -31,7 +31,7 @@ export const OpenCostPage = openCostPlugin.provide(
   createRoutableExtension({
     name: 'OpenCostPage',
     component: () =>
-      import('./components/ExampleComponent').then(m => m.ExampleComponent),
+      import('./components/OpenCostPage').then(m => m.OpenCostPage),
     mountPoint: rootRouteRef,
   }),
 );