diff --git a/gallery/src/demos/demo-integration-card.ts b/gallery/src/demos/demo-integration-card.ts
index 35c6b46b3b..03a44a1853 100644
--- a/gallery/src/demos/demo-integration-card.ts
+++ b/gallery/src/demos/demo-integration-card.ts
@@ -79,7 +79,11 @@ const setupRetryEntry = createConfigEntry("Setup Retry", {
 });
 const setupRetryReasonEntry = createConfigEntry("Setup Retry", {
   state: "setup_retry",
-  reason: "Unable to connect",
+  reason: "connection_error",
+});
+const setupRetryReasonMissingKeyEntry = createConfigEntry("Setup Retry", {
+  state: "setup_retry",
+  reason: "resolve_error",
 });
 const failedUnloadEntry = createConfigEntry("Failed Unload", {
   state: "failed_unload",
@@ -141,6 +145,7 @@ const configEntries: Array<{
   { items: [migrationErrorEntry] },
   { items: [setupRetryEntry] },
   { items: [setupRetryReasonEntry] },
+  { items: [setupRetryReasonMissingKeyEntry] },
   { items: [failedUnloadEntry] },
   { items: [notLoadedEntry] },
   {
@@ -298,6 +303,14 @@ export class DemoIntegrationCard extends LitElement {
     const hass = provideHass(this);
     hass.updateTranslations(null, "en");
     hass.updateTranslations("config", "en");
+    // Normally this string is loaded from backend
+    hass.addTranslations(
+      {
+        "component.esphome.config.error.connection_error":
+          "Can't connect to ESP. Please make sure your YAML file contains an 'api:' line.",
+      },
+      "en"
+    );
   }
 
   private _toggleCustomIntegration() {
diff --git a/src/fake_data/provide_hass.ts b/src/fake_data/provide_hass.ts
index dbbe930314..e74cb69152 100644
--- a/src/fake_data/provide_hass.ts
+++ b/src/fake_data/provide_hass.ts
@@ -30,6 +30,7 @@ export interface MockHomeAssistant extends HomeAssistant {
   updateStates(newStates: HassEntities);
   addEntities(entites: Entity | Entity[], replace?: boolean);
   updateTranslations(fragment: null | string, language?: string);
+  addTranslations(translations: Record<string, string>, language?: string);
   mockWS(
     type: string,
     callback: (msg: any, onChange?: (response: any) => void) => any
@@ -60,15 +61,25 @@ export const provideHass = (
   ) {
     const lang = language || getLocalLanguage();
     const translation = await getTranslation(fragment, lang);
+    await addTranslations(translation.data, lang);
+  }
+
+  async function addTranslations(
+    translations: Record<string, string>,
+    language?: string
+  ) {
+    const lang = language || getLocalLanguage();
     const resources = {
       [lang]: {
         ...(hass().resources && hass().resources[lang]),
-        ...translation.data,
+        ...translations,
       },
     };
     hass().updateHass({
       resources,
-      localize: await computeLocalize(elements[0], lang, resources),
+    });
+    hass().updateHass({
+      localize: await computeLocalize(elements[0], lang, hass().resources),
     });
   }
 
@@ -209,6 +220,9 @@ export const provideHass = (
     localize: () => "",
 
     translationMetadata: translationMetadata as any,
+    async loadBackendTranslation() {
+      return hass().localize;
+    },
     dockedSidebar: "auto",
     vibrate: true,
     suspendWhenHidden: false,
@@ -250,6 +264,7 @@ export const provideHass = (
     },
     updateStates,
     updateTranslations,
+    addTranslations,
     addEntities,
     mockWS(type, callback) {
       wsCommands[type] = callback;
diff --git a/src/panels/config/integrations/ha-integration-card.ts b/src/panels/config/integrations/ha-integration-card.ts
index 55687a48d2..44a4b8cc83 100644
--- a/src/panels/config/integrations/ha-integration-card.ts
+++ b/src/panels/config/integrations/ha-integration-card.ts
@@ -199,16 +199,22 @@ export class HaIntegrationCard extends LitElement {
       stateText = [
         `ui.panel.config.integrations.config_entry.state.${item.state}`,
       ];
-      stateTextExtra = item.reason
-        ? html`: ${item.reason}`
-        : html`
-            <br />
-            <a href="/config/logs"
-              >${this.hass.localize(
-                "ui.panel.config.integrations.config_entry.check_the_logs"
-              )}</a
-            >
-          `;
+      if (item.reason) {
+        this.hass.loadBackendTranslation("config", item.domain);
+        stateTextExtra = html`:
+        ${this.hass.localize(
+          `component.${item.domain}.config.error.${item.reason}`
+        ) || item.reason}`;
+      } else {
+        stateTextExtra = html`
+          <br />
+          <a href="/config/logs"
+            >${this.hass.localize(
+              "ui.panel.config.integrations.config_entry.check_the_logs"
+            )}</a
+          >
+        `;
+      }
     }
 
     return html`
diff --git a/src/translations/en.json b/src/translations/en.json
index 3edb0f751e..0739654482 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -2179,7 +2179,7 @@
               "loaded": "Loaded",
               "setup_error": "Failed to set up",
               "migration_error": "Migration error",
-              "setup_retry": "Retrying to set up",
+              "setup_retry": "Retrying setup",
               "not_loaded": "Not loaded",
               "failed_unload": "Failed to unload"
             }