diff --git a/src/data/integration.ts b/src/data/integration.ts
index 8a59d2d4d7..d8caf1b591 100644
--- a/src/data/integration.ts
+++ b/src/data/integration.ts
@@ -25,8 +25,11 @@ export const integrationIssuesUrl = (
   manifest.issue_tracker ||
   `https://github.com/home-assistant/home-assistant/issues?q=is%3Aissue+is%3Aopen+label%3A%22integration%3A+${domain}%22`;
 
-export const domainToName = (localize: LocalizeFunc, domain: string) =>
-  localize(`component.${domain}.title`) || domain;
+export const domainToName = (
+  localize: LocalizeFunc,
+  domain: string,
+  manifest?: IntegrationManifest
+) => localize(`component.${domain}.title`) || manifest?.name || domain;
 
 export const fetchIntegrationManifests = (hass: HomeAssistant) =>
   hass.callWS<IntegrationManifest[]>({ type: "manifest/list" });
diff --git a/src/panels/config/info/integrations-card.ts b/src/panels/config/info/integrations-card.ts
index b7e10b3e24..d078524f1e 100644
--- a/src/panels/config/info/integrations-card.ts
+++ b/src/panels/config/info/integrations-card.ts
@@ -28,7 +28,12 @@ class IntegrationsCard extends LitElement {
   };
 
   private _sortedIntegrations = memoizeOne((components: string[]) => {
-    return components.filter((comp) => !comp.includes(".")).sort();
+    return Array.from(
+      new Set(
+        components
+          .map((comp) => (comp.includes(".") ? comp.split(".")[1] : comp))
+      )
+    ).sort();
   });
 
   firstUpdated(changedProps) {
@@ -56,7 +61,7 @@ class IntegrationsCard extends LitElement {
                       />
                     </td>
                     <td class="name">
-                      ${domainToName(this.hass.localize, domain)}<br />
+                      ${domainToName(this.hass.localize, domain, manifest)}<br />
                       <span class="domain">${domain}</span>
                     </td>
                     ${!manifest