diff --git a/src/panels/lovelace/views/hui-panel-view.ts b/src/panels/lovelace/views/hui-panel-view.ts
index 83715e9a95..0145fed1b5 100644
--- a/src/panels/lovelace/views/hui-panel-view.ts
+++ b/src/panels/lovelace/views/hui-panel-view.ts
@@ -10,8 +10,8 @@ import type { LovelaceViewConfig } from "../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../types";
 import type { HuiCard } from "../cards/hui-card";
 import type { HuiCardOptions } from "../components/hui-card-options";
-import type { HuiWarning } from "../components/hui-warning";
 import type { Lovelace } from "../types";
+import "../../../components/ha-alert";
 
 let editCodeLoaded = false;
 
@@ -26,7 +26,7 @@ export class PanelView extends LitElement implements LovelaceViewElement {
 
   @property({ attribute: false }) public cards: HuiCard[] = [];
 
-  @state() private _card?: HuiCard | HuiWarning | HuiCardOptions;
+  @state() private _card?: HuiCard | HuiCardOptions;
 
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   public setConfig(_config: LovelaceViewConfig): void {}
@@ -63,11 +63,11 @@ export class PanelView extends LitElement implements LovelaceViewElement {
   protected render(): TemplateResult {
     return html`
       ${this.cards!.length > 1
-        ? html`<hui-warning .hass=${this.hass}>
-            ${this.hass!.localize(
+        ? html`<ha-alert alert-type="warning"
+            >${this.hass!.localize(
               "ui.panel.lovelace.editor.view.panel_mode.warning_multiple_cards"
-            )}
-          </hui-warning>`
+            )}</ha-alert
+          >`
         : ""}
       ${this._card}
       ${this.lovelace?.editMode && this.cards.length === 0