diff --git a/src/components/IOC/IOCBadge/IOCBadge.js b/src/components/IOC/IOCBadge/IOCBadge.js
index afe564baee9c1f8fbaef24bd04b9c8e4b91b7b10..5a4511ef38f949b5c2fbea0271235bac448261c4 100644
--- a/src/components/IOC/IOCBadge/IOCBadge.js
+++ b/src/components/IOC/IOCBadge/IOCBadge.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { IconBadge } from "../../common/Badge/IconBadge";
+import { IconBadge } from "@ess-ics/ce-ui-common";
 import { IOCStatusIcon } from "../IOCIcons";
 
 export function IOCBadge({ ioc, ...rest }) {
@@ -7,7 +7,7 @@ export function IOCBadge({ ioc, ...rest }) {
     <IconBadge
       icon={<IOCStatusIcon ioc={ioc} />}
       title={ioc.namingName ?? ioc.name}
-      subheader={ioc.activeDeployment?.host?.fqdn || "---"}
+      subtitle={ioc.activeDeployment?.host?.fqdn || "---"}
       {...rest}
     />
   );
diff --git a/src/components/Job/JobBadge.js b/src/components/Job/JobBadge.js
index 4ea90fdbfa18ce438a60f5084e2a9577b34537aa..f9a347a1b3fdfc9c4033d39fa28435b7c9b448e1 100644
--- a/src/components/Job/JobBadge.js
+++ b/src/components/Job/JobBadge.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { IconBadge } from "../common/Badge/IconBadge";
+import { IconBadge } from "@ess-ics/ce-ui-common";
 import { JobTypeIcon } from "./JobIcons";
 import { InternalLink } from "@ess-ics/ce-ui-common";
 
@@ -24,7 +24,7 @@ export function JobBadge({ operation }) {
         </>
       }
       title={linkToIoc}
-      subheader={operation.host.fqdn || "---"}
+      subtitle={operation.host.fqdn || "---"}
     />
   );
 }
diff --git a/src/components/common/Badge/IconBadge.js b/src/components/common/Badge/IconBadge.js
deleted file mode 100644
index 53d22469ee575add13b2cc59286e505a6366bd20..0000000000000000000000000000000000000000
--- a/src/components/common/Badge/IconBadge.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Grid, Typography } from "@mui/material";
-import React from "react";
-
-export function IconBadge({ icon, secondaryIcon, title, subheader, ...rest }) {
-  return (
-    <Grid
-      container
-      alignItems="center"
-      {...rest}
-    >
-      <Grid
-        item
-        xs={3}
-        sm={2}
-        md={1}
-      >
-        <Grid
-          container
-          justifyContent="center"
-          direction="column"
-          alignItems="center"
-        >
-          {icon}
-          {secondaryIcon}
-        </Grid>
-      </Grid>
-      <Grid
-        item
-        xs={9}
-        sm={10}
-        md={11}
-      >
-        <Grid
-          container
-          justifyContent="flex-start"
-        >
-          <Grid
-            item
-            xs={12}
-            zeroMinWidth
-          >
-            <Typography
-              noWrap
-              color="textPrimary"
-            >
-              {title}
-            </Typography>
-          </Grid>
-          <Grid
-            item
-            xs={12}
-            zeroMinWidth
-          >
-            <Typography
-              noWrap
-              color="textSecondary"
-            >
-              {subheader}
-            </Typography>
-          </Grid>
-        </Grid>
-      </Grid>
-    </Grid>
-  );
-}
diff --git a/src/components/common/Badge/index.js b/src/components/common/Badge/index.js
deleted file mode 100644
index 557989e21644f6756164fd197badae26ce79b1a4..0000000000000000000000000000000000000000
--- a/src/components/common/Badge/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { IconBadge } from "./IconBadge";
-
-export { IconBadge };
-export default IconBadge;
diff --git a/src/components/host/HostBadge.js b/src/components/host/HostBadge.js
index 80e6132f83b088b4f37bdc344608ecdab307c87b..64e6c433c7b86d8fc8f3eba009506cf44744f366 100644
--- a/src/components/host/HostBadge.js
+++ b/src/components/host/HostBadge.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { IconBadge } from "../common/Badge/IconBadge";
+import { IconBadge } from "@ess-ics/ce-ui-common";
 import { HostStatusIcon } from "./HostIcons";
 import { extractMainNetwork } from "../common/Helper";
 
@@ -8,7 +8,7 @@ export function HostBadge({ host, ...rest }) {
     <IconBadge
       icon={<HostStatusIcon host={host} />}
       title={host.csEntryHost?.fqdn}
-      subheader={extractMainNetwork(host?.csEntryHost?.interfaces, "---")}
+      subtitle={extractMainNetwork(host?.csEntryHost?.interfaces, "---")}
       {...rest}
     />
   );
diff --git a/src/components/records/RecordBadge.js b/src/components/records/RecordBadge.js
index 286e976fc0ffc8e8766405104c4ef11ab53c80c7..664ce2bdcccd002d83838add067e7ece5bb2ee75 100644
--- a/src/components/records/RecordBadge.js
+++ b/src/components/records/RecordBadge.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { IconBadge } from "../common/Badge/IconBadge";
+import { IconBadge } from "@ess-ics/ce-ui-common";
 import { RecordStatusIcon } from "./RecordIcons";
 
 export function RecordBadge({ record, ...rest }) {
@@ -7,7 +7,7 @@ export function RecordBadge({ record, ...rest }) {
     <IconBadge
       icon={<RecordStatusIcon record={record} />}
       title={record.name}
-      subheader={record.iocName}
+      subtitle={record.iocName}
       {...rest}
     />
   );