diff --git a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx
index fb86470760..adfa3cd34c 100644
--- a/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx
+++ b/plugins/api-docs/src/components/ApisCards/ConsumedApisCard.tsx
@@ -31,20 +31,9 @@ import {
   useEntity,
   useRelatedEntities,
 } from '@backstage/plugin-catalog-react';
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 import { apiEntityColumns } from './presets';
 
-const ApisCard = ({
-  children,
-  variant = 'gridItem',
-}: PropsWithChildren<{ variant?: 'gridItem' }>) => {
-  return (
-    <InfoCard variant={variant} title="Consumed APIs">
-      {children}
-    </InfoCard>
-  );
-};
-
 type Props = {
   /** @deprecated The entity is now grabbed from context instead */
   entity?: Entity;
@@ -59,21 +48,21 @@ export const ConsumedApisCard = ({ variant = 'gridItem' }: Props) => {
 
   if (loading) {
     return (
-      <ApisCard variant={variant}>
+      <InfoCard variant={variant} title="Consumed APIs">
         <Progress />
-      </ApisCard>
+      </InfoCard>
     );
   }
 
   if (error || !entities) {
     return (
-      <ApisCard variant={variant}>
+      <InfoCard variant={variant} title="Consumed APIs">
         <WarningPanel
           severity="error"
           title="Could not load APIs"
           message={<CodeSnippet text={`${error}`} language="text" />}
         />
-      </ApisCard>
+      </InfoCard>
     );
   }
 
diff --git a/plugins/api-docs/src/components/ApisCards/HasApisCard.tsx b/plugins/api-docs/src/components/ApisCards/HasApisCard.tsx
index 7de1448462..9f1d487b65 100644
--- a/plugins/api-docs/src/components/ApisCards/HasApisCard.tsx
+++ b/plugins/api-docs/src/components/ApisCards/HasApisCard.tsx
@@ -27,20 +27,9 @@ import {
   useEntity,
   useRelatedEntities,
 } from '@backstage/plugin-catalog-react';
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 import { apiEntityColumns } from './presets';
 
-const ApisCard = ({
-  children,
-  variant = 'gridItem',
-}: PropsWithChildren<{ variant?: 'gridItem' }>) => {
-  return (
-    <InfoCard variant={variant} title="APIs">
-      {children}
-    </InfoCard>
-  );
-};
-
 type Props = {
   variant?: 'gridItem';
 };
@@ -54,21 +43,21 @@ export const HasApisCard = ({ variant = 'gridItem' }: Props) => {
 
   if (loading) {
     return (
-      <ApisCard variant={variant}>
+      <InfoCard variant={variant} title="APIs">
         <Progress />
-      </ApisCard>
+      </InfoCard>
     );
   }
 
   if (error || !entities) {
     return (
-      <ApisCard variant={variant}>
+      <InfoCard variant={variant} title="APIs">
         <WarningPanel
           severity="error"
           title="Could not load APIs"
           message={<CodeSnippet text={`${error}`} language="text" />}
         />
-      </ApisCard>
+      </InfoCard>
     );
   }
 
diff --git a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx
index 53e2cd9558..f02390b6d6 100644
--- a/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx
+++ b/plugins/api-docs/src/components/ApisCards/ProvidedApisCard.tsx
@@ -31,20 +31,9 @@ import {
   useEntity,
   useRelatedEntities,
 } from '@backstage/plugin-catalog-react';
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 import { apiEntityColumns } from './presets';
 
-const ApisCard = ({
-  children,
-  variant = 'gridItem',
-}: PropsWithChildren<{ variant?: 'gridItem' }>) => {
-  return (
-    <InfoCard variant={variant} title="Provided APIs">
-      {children}
-    </InfoCard>
-  );
-};
-
 type Props = {
   /** @deprecated The entity is now grabbed from context instead */
   entity?: Entity;
@@ -59,21 +48,21 @@ export const ProvidedApisCard = ({ variant = 'gridItem' }: Props) => {
 
   if (loading) {
     return (
-      <ApisCard variant={variant}>
+      <InfoCard variant={variant} title="Provided APIs">
         <Progress />
-      </ApisCard>
+      </InfoCard>
     );
   }
 
   if (error || !entities) {
     return (
-      <ApisCard variant={variant}>
+      <InfoCard variant={variant} title="Provided APIs">
         <WarningPanel
           severity="error"
           title="Could not load APIs"
           message={<CodeSnippet text={`${error}`} language="text" />}
         />
-      </ApisCard>
+      </InfoCard>
     );
   }
 
diff --git a/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx b/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx
index 111e05a04a..7e4d97fece 100644
--- a/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx
+++ b/plugins/api-docs/src/components/ComponentsCards/ConsumingComponentsCard.tsx
@@ -31,18 +31,7 @@ import {
   useEntity,
   useRelatedEntities,
 } from '@backstage/plugin-catalog-react';
-import React, { PropsWithChildren } from 'react';
-
-const ComponentsCard = ({
-  children,
-  variant = 'gridItem',
-}: PropsWithChildren<{ variant?: 'gridItem' }>) => {
-  return (
-    <InfoCard variant={variant} title="Consumers">
-      {children}
-    </InfoCard>
-  );
-};
+import React from 'react';
 
 type Props = {
   /** @deprecated The entity is now grabbed from context instead */
@@ -58,21 +47,21 @@ export const ConsumingComponentsCard = ({ variant = 'gridItem' }: Props) => {
 
   if (loading) {
     return (
-      <ComponentsCard variant={variant}>
+      <InfoCard variant={variant} title="Consumers">
         <Progress />
-      </ComponentsCard>
+      </InfoCard>
     );
   }
 
   if (error || !entities) {
     return (
-      <ComponentsCard variant={variant}>
+      <InfoCard variant={variant} title="Consumers">
         <WarningPanel
           severity="error"
           title="Could not load components"
           message={<CodeSnippet text={`${error}`} language="text" />}
         />
-      </ComponentsCard>
+      </InfoCard>
     );
   }
 
diff --git a/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx b/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx
index 44f4c3a854..d755d8b5af 100644
--- a/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx
+++ b/plugins/api-docs/src/components/ComponentsCards/ProvidingComponentsCard.tsx
@@ -31,18 +31,7 @@ import {
   useEntity,
   useRelatedEntities,
 } from '@backstage/plugin-catalog-react';
-import React, { PropsWithChildren } from 'react';
-
-const ComponentsCard = ({
-  children,
-  variant = 'gridItem',
-}: PropsWithChildren<{ variant?: 'gridItem' }>) => {
-  return (
-    <InfoCard variant={variant} title="Providers">
-      {children}
-    </InfoCard>
-  );
-};
+import React from 'react';
 
 type Props = {
   /** @deprecated The entity is now grabbed from context instead */
@@ -58,21 +47,21 @@ export const ProvidingComponentsCard = ({ variant = 'gridItem' }: Props) => {
 
   if (loading) {
     return (
-      <ComponentsCard variant={variant}>
+      <InfoCard variant={variant} title="Providers">
         <Progress />
-      </ComponentsCard>
+      </InfoCard>
     );
   }
 
   if (error || !entities) {
     return (
-      <ComponentsCard variant={variant}>
+      <InfoCard variant={variant} title="Providers">
         <WarningPanel
           severity="error"
           title="Could not load components"
           message={<CodeSnippet text={`${error}`} language="text" />}
         />
-      </ComponentsCard>
+      </InfoCard>
     );
   }
 
diff --git a/plugins/catalog/src/components/ComponentsCard/HasComponentsCard.test.tsx b/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.test.tsx
similarity index 100%
rename from plugins/catalog/src/components/ComponentsCard/HasComponentsCard.test.tsx
rename to plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.test.tsx
diff --git a/plugins/catalog/src/components/ComponentsCard/HasComponentsCard.tsx b/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.tsx
similarity index 82%
rename from plugins/catalog/src/components/ComponentsCard/HasComponentsCard.tsx
rename to plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.tsx
index b7dbb47848..6485d4f525 100644
--- a/plugins/catalog/src/components/ComponentsCard/HasComponentsCard.tsx
+++ b/plugins/catalog/src/components/HasComponentsCard/HasComponentsCard.tsx
@@ -27,18 +27,7 @@ import {
   useEntity,
   useRelatedEntities,
 } from '@backstage/plugin-catalog-react';
-import React, { PropsWithChildren } from 'react';
-
-const ComponentsCard = ({
-  children,
-  variant = 'gridItem',
-}: PropsWithChildren<{ variant?: 'gridItem' }>) => {
-  return (
-    <InfoCard variant={variant} title="Components">
-      {children}
-    </InfoCard>
-  );
-};
+import React from 'react';
 
 type Props = {
   variant?: 'gridItem';
@@ -53,21 +42,21 @@ export const HasComponentsCard = ({ variant = 'gridItem' }: Props) => {
 
   if (loading) {
     return (
-      <ComponentsCard variant={variant}>
+      <InfoCard variant={variant} title="Components">
         <Progress />
-      </ComponentsCard>
+      </InfoCard>
     );
   }
 
   if (error || !entities) {
     return (
-      <ComponentsCard variant={variant}>
+      <InfoCard variant={variant} title="Components">
         <WarningPanel
           severity="error"
           title="Could not load components"
           message={<CodeSnippet text={`${error}`} language="text" />}
         />
-      </ComponentsCard>
+      </InfoCard>
     );
   }
 
diff --git a/plugins/catalog/src/components/ComponentsCard/index.ts b/plugins/catalog/src/components/HasComponentsCard/index.ts
similarity index 100%
rename from plugins/catalog/src/components/ComponentsCard/index.ts
rename to plugins/catalog/src/components/HasComponentsCard/index.ts
diff --git a/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx b/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx
index d039ba293f..c2635b68e1 100644
--- a/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx
+++ b/plugins/catalog/src/components/HasSubcomponentsCard/HasSubcomponentsCard.tsx
@@ -27,18 +27,7 @@ import {
   useEntity,
   useRelatedEntities,
 } from '@backstage/plugin-catalog-react';
-import React, { PropsWithChildren } from 'react';
-
-const SubcomponentsCard = ({
-  children,
-  variant = 'gridItem',
-}: PropsWithChildren<{ variant?: 'gridItem' }>) => {
-  return (
-    <InfoCard variant={variant} title="Subcomponents">
-      {children}
-    </InfoCard>
-  );
-};
+import React from 'react';
 
 type Props = {
   variant?: 'gridItem';
@@ -53,21 +42,21 @@ export const HasSubcomponentsCard = ({ variant = 'gridItem' }: Props) => {
 
   if (loading) {
     return (
-      <SubcomponentsCard variant={variant}>
+      <InfoCard variant={variant} title="Subcomponents">
         <Progress />
-      </SubcomponentsCard>
+      </InfoCard>
     );
   }
 
   if (error || !entities) {
     return (
-      <SubcomponentsCard variant={variant}>
+      <InfoCard variant={variant} title="Subcomponents">
         <WarningPanel
           severity="error"
           title="Could not load subcomponents"
           message={<CodeSnippet text={`${error}`} language="text" />}
         />
-      </SubcomponentsCard>
+      </InfoCard>
     );
   }
 
diff --git a/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx b/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx
index 3962ea3238..9faa640060 100644
--- a/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx
+++ b/plugins/catalog/src/components/HasSystemsCard/HasSystemsCard.tsx
@@ -27,18 +27,7 @@ import {
   useEntity,
   useRelatedEntities,
 } from '@backstage/plugin-catalog-react';
-import React, { PropsWithChildren } from 'react';
-
-const SystemsCard = ({
-  children,
-  variant = 'gridItem',
-}: PropsWithChildren<{ variant?: 'gridItem' }>) => {
-  return (
-    <InfoCard variant={variant} title="Systems">
-      {children}
-    </InfoCard>
-  );
-};
+import React from 'react';
 
 type Props = {
   variant?: 'gridItem';
@@ -52,21 +41,21 @@ export const HasSystemsCard = ({ variant = 'gridItem' }: Props) => {
 
   if (loading) {
     return (
-      <SystemsCard variant={variant}>
+      <InfoCard variant={variant} title="Systems">
         <Progress />
-      </SystemsCard>
+      </InfoCard>
     );
   }
 
   if (error || !entities) {
     return (
-      <SystemsCard variant={variant}>
+      <InfoCard variant={variant} title="Systems">
         <WarningPanel
           severity="error"
           title="Could not load systems"
           message={<CodeSnippet text={`${error}`} language="text" />}
         />
-      </SystemsCard>
+      </InfoCard>
     );
   }
 
diff --git a/plugins/catalog/src/plugin.ts b/plugins/catalog/src/plugin.ts
index 3b2a6f58f4..a0932a8dba 100644
--- a/plugins/catalog/src/plugin.ts
+++ b/plugins/catalog/src/plugin.ts
@@ -95,7 +95,7 @@ export const EntityHasComponentsCard = catalogPlugin.provide(
   createComponentExtension({
     component: {
       lazy: () =>
-        import('./components/ComponentsCard').then(m => m.HasComponentsCard),
+        import('./components/HasComponentsCard').then(m => m.HasComponentsCard),
     },
   }),
 );