diff --git a/src/panels/lovelace/cards/hui-error-card.ts b/src/panels/lovelace/cards/hui-error-card.ts
index 969ad566c7..72f45442d8 100644
--- a/src/panels/lovelace/cards/hui-error-card.ts
+++ b/src/panels/lovelace/cards/hui-error-card.ts
@@ -1,6 +1,7 @@
 import { dump } from "js-yaml";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators";
+import "../../../components/ha-alert";
 import { HomeAssistant } from "../../../types";
 import { LovelaceCard } from "../types";
 import { ErrorCardConfig } from "./types";
@@ -34,25 +35,17 @@ export class HuiErrorCard extends LitElement implements LovelaceCard {
       }
     }
 
-    return html`
-      ${this._config.error}${dumped ? html`<pre>${dumped}</pre>` : ""}
-    `;
+    return html`<ha-alert alert-type="error" .title=${this._config.error}>
+      ${dumped ? html`<pre>${dumped}</pre>` : ""}
+    </ha-alert>`;
   }
 
   static get styles(): CSSResultGroup {
     return css`
-      :host {
-        display: block;
-        background-color: var(--error-color);
-        color: var(--color-on-error, white);
-        padding: 8px;
-        font-weight: 500;
-        user-select: text;
-        cursor: default;
-      }
       pre {
         font-family: var(--code-font-family, monospace);
         text-overflow: ellipsis;
+        user-select: text;
         overflow: hidden;
       }
     `;
diff --git a/src/panels/lovelace/components/hui-warning.ts b/src/panels/lovelace/components/hui-warning.ts
index 183c75497a..20f59819c2 100644
--- a/src/panels/lovelace/components/hui-warning.ts
+++ b/src/panels/lovelace/components/hui-warning.ts
@@ -1,6 +1,7 @@
 import { STATE_NOT_RUNNING } from "home-assistant-js-websocket";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
+import "../../../components/ha-alert";
 import { HomeAssistant } from "../../../types";
 
 export const createEntityNotFoundWarning = (
@@ -18,19 +19,7 @@ export const createEntityNotFoundWarning = (
 @customElement("hui-warning")
 export class HuiWarning extends LitElement {
   protected render(): TemplateResult {
-    return html` <slot></slot> `;
-  }
-
-  static get styles(): CSSResultGroup {
-    return css`
-      :host {
-        display: block;
-        color: black;
-        background-color: #fce588;
-        padding: 8px;
-        word-break: break-word;
-      }
-    `;
+    return html`<ha-alert alert-type="warning"><slot></slot></ha-alert> `;
   }
 }