diff --git a/cast/src/receiver/layout/hc-lovelace.ts b/cast/src/receiver/layout/hc-lovelace.ts
index fd5513eb81..641eee4305 100644
--- a/cast/src/receiver/layout/hc-lovelace.ts
+++ b/cast/src/receiver/layout/hc-lovelace.ts
@@ -9,6 +9,7 @@ import {
 } from "lit-element";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
 import "../../../../src/panels/lovelace/views/hui-view";
+import "../../../../src/panels/lovelace/views/hui-panel-view";
 import { HomeAssistant } from "../../../../src/types";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
 import "./hc-launch-screen";
@@ -40,14 +41,21 @@ class HcLovelace extends LitElement {
       saveConfig: async () => undefined,
       setEditMode: () => undefined,
     };
-    return html`
-      <hui-view
-        .hass=${this.hass}
-        .lovelace=${lovelace}
-        .index=${index}
-        columns="2"
-      ></hui-view>
-    `;
+    return this.lovelaceConfig.views[index].panel
+      ? html`
+          <hui-panel-view
+            .hass=${this.hass}
+            .config=${this.lovelaceConfig.views[index]}
+          ></hui-panel-view>
+        `
+      : html`
+          <hui-view
+            .hass=${this.hass}
+            .lovelace=${lovelace}
+            .index=${index}
+            columns="2"
+          ></hui-view>
+        `;
   }
 
   protected updated(changedProps) {
@@ -62,7 +70,9 @@ class HcLovelace extends LitElement {
           this.lovelaceConfig.background;
 
         if (configBackground) {
-          this.shadowRoot!.querySelector("hui-view")!.style.setProperty(
+          (this.shadowRoot!.querySelector(
+            "hui-view, hui-panel-view"
+          ) as HTMLElement)!.style.setProperty(
             "--lovelace-background",
             configBackground
           );
@@ -94,7 +104,7 @@ class HcLovelace extends LitElement {
         box-sizing: border-box;
         background: var(--primary-background-color);
       }
-      hui-view {
+      :host > * {
         flex: 1;
       }
     `;