diff --git a/src/cards/entity-card/entity-card.ts b/src/cards/entity-card/entity-card.ts
index 81dd1b60..4da0ac53 100644
--- a/src/cards/entity-card/entity-card.ts
+++ b/src/cards/entity-card/entity-card.ts
@@ -36,7 +36,7 @@ registerCustomCard({
 });
 
 @customElement(ENTITY_CARD_NAME)
-export class EntityCard extends MushroomBaseCard implements LovelaceCard {
+export class EntityCard extends MushroomBaseCard<EntityCardConfig> implements LovelaceCard {
     public static async getConfigElement(): Promise<LovelaceCardEditor> {
         await import("./entity-card-editor");
         return document.createElement(ENTITY_CARD_EDITOR_NAME) as LovelaceCardEditor;
@@ -50,14 +50,8 @@ export class EntityCard extends MushroomBaseCard implements LovelaceCard {
         };
     }
 
-    @state() private _config?: EntityCardConfig;
-
-    getCardSize(): number | Promise<number> {
-        return 1;
-    }
-
     setConfig(config: EntityCardConfig): void {
-        this._config = {
+        super.setConfig({
             tap_action: {
                 action: "more-info",
             },
@@ -65,7 +59,7 @@ export class EntityCard extends MushroomBaseCard implements LovelaceCard {
                 action: "more-info",
             },
             ...config,
-        };
+        });
     }
 
     private _handleAction(ev: ActionHandlerEvent) {
diff --git a/src/cards/light-card/light-card.ts b/src/cards/light-card/light-card.ts
index ba35686e..7a8e4a0f 100644
--- a/src/cards/light-card/light-card.ts
+++ b/src/cards/light-card/light-card.ts
@@ -59,7 +59,7 @@ registerCustomCard({
 });
 
 @customElement(LIGHT_CARD_NAME)
-export class LightCard extends MushroomBaseCard implements LovelaceCard {
+export class LightCard extends MushroomBaseCard<LightCardConfig> implements LovelaceCard {
     public static async getConfigElement(): Promise<LovelaceCardEditor> {
         await import("./light-card-editor");
         return document.createElement(LIGHT_CARD_EDITOR_NAME) as LovelaceCardEditor;
@@ -74,14 +74,10 @@ export class LightCard extends MushroomBaseCard implements LovelaceCard {
         };
     }
 
-    @state() private _config?: LightCardConfig;
-
     @state() private _activeControl?: LightCardControl;
 
     @state() private brightness?: number;
 
-    @state() private _inGrid = false;
-
     private get _controls(): LightCardControl[] {
         if (!this._config || !this.hass || !this._config.entity) return [];
 
@@ -102,35 +98,22 @@ export class LightCard extends MushroomBaseCard implements LovelaceCard {
         return controls;
     }
 
-    public getCardSize(): number | Promise<number> {
-        return 1;
-    }
-
     public getGridSize(): [number, number] {
-        this._inGrid = true;
-        let column = 2;
-        let row = 1;
-        if (!this._config) return [column, row];
-
+        const size = super.getGridSize();
+        if (!this._config) return size;
         const appearance = computeAppearance(this._config);
-        if (appearance.layout === "vertical") {
-            row += 1;
-        }
-        if (appearance.layout === "horizontal") {
-            column = 4;
-        }
         if (
             this._controls.length &&
             !this._config?.collapsible_controls &&
             appearance.layout !== "horizontal"
         ) {
-            row += 1;
+            size[1] += 1;
         }
-        return [column, row];
+        return size;
     }
 
     setConfig(config: LightCardConfig): void {
-        this._config = {
+        super.setConfig({
             tap_action: {
                 action: "toggle",
             },
@@ -138,7 +121,7 @@ export class LightCard extends MushroomBaseCard implements LovelaceCard {
                 action: "more-info",
             },
             ...config,
-        };
+        });
         this.updateActiveControls();
         this.updateBrightness();
     }
diff --git a/src/utils/base-card.ts b/src/utils/base-card.ts
index 02ffd7bb..4db029a3 100644
--- a/src/utils/base-card.ts
+++ b/src/utils/base-card.ts
@@ -1,5 +1,6 @@
 import { HassEntity } from "home-assistant-js-websocket";
 import { html, nothing, TemplateResult } from "lit";
+import { property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { computeRTL, computeStateDisplay, HomeAssistant, isActive, isAvailable } from "../ha";
 import setupCustomlocalize from "../localize";
@@ -21,7 +22,36 @@ export function computeDarkMode(hass?: HomeAssistant): boolean {
     if (!hass) return false;
     return (hass.themes as any).darkMode as boolean;
 }
-export class MushroomBaseCard extends MushroomBaseElement {
+export class MushroomBaseCard<T extends BaseConfig = BaseConfig> extends MushroomBaseElement {
+    @state() protected _config?: T;
+
+    @property({ attribute: "in-grid", reflect: true, type: Boolean })
+    protected _inGrid = false;
+
+    public getCardSize(): number | Promise<number> {
+        return 1;
+    }
+
+    setConfig(config: T): void {
+        this._config = config;
+    }
+
+    public getGridSize(): [number, number] {
+        this._inGrid = true;
+        let column = 2;
+        let row = 1;
+        if (!this._config) return [column, row];
+
+        const appearance = computeAppearance(this._config);
+        if (appearance.layout === "vertical") {
+            row += 1;
+        }
+        if (appearance.layout === "horizontal") {
+            column = 4;
+        }
+        return [column, row];
+    }
+
     protected renderPicture(picture: string): TemplateResult {
         return html`
             <mushroom-shape-avatar
diff --git a/src/utils/card-styles.ts b/src/utils/card-styles.ts
index 6bd471b5..6c6c0036 100644
--- a/src/utils/card-styles.ts
+++ b/src/utils/card-styles.ts
@@ -12,10 +12,10 @@ export const cardStyle = css`
     ha-card.fill-container {
         height: 100%;
     }
-    ha-card.in-grid {
+    :host([in-grid]) ha-card {
         height: 100%;
     }
-    ha-card.in-grid mushroom-card {
+    :host([in-grid]) ha-card mushroom-card {
         height: 100%;
     }
     .actions {