diff --git a/cast/src/launcher/layout/hc-layout.ts b/cast/src/launcher/layout/hc-layout.ts
index f9d82223b..1c7a850a3 100644
--- a/cast/src/launcher/layout/hc-layout.ts
+++ b/cast/src/launcher/layout/hc-layout.ts
@@ -30,7 +30,7 @@ class HcLayout extends LitElement {
       <ha-card>
         <div class="layout">
           <img class="hero" src="/images/google-nest-hub.png" />
-          <div class="card-header">
+          <h1 class="card-header">
             Home Assistant Cast${this.subtitle ? ` – ${this.subtitle}` : ""}
             ${this.auth
               ? html`
@@ -44,7 +44,7 @@ class HcLayout extends LitElement {
                   </div>
                 `
               : ""}
-          </div>
+          </h1>
           <slot></slot>
         </div>
       </ha-card>
diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts
index 1309e7d5a..27bd3ed6c 100644
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -178,7 +178,7 @@ class HassioAddonInfo extends LitElement {
       ${!this.addon.protected
         ? html`
         <ha-card class="warning">
-          <div class="card-header">Warning: Protection mode is disabled!</div>
+          <h1 class="card-header">Warning: Protection mode is disabled!</h1>
           <div class="card-content">
             Protection mode on this add-on is disabled! This gives the add-on full access to the entire system, which adds security risks, and could damage your system when used incorrectly. Only disable the protection mode if you know, need AND trust the source of this add-on.
           </div>
diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts
index cf215968c..157d663bf 100644
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@@ -50,9 +50,12 @@ export class HaCard extends LitElement {
         font-family: var(--ha-card-header-font-family, inherit);
         font-size: var(--ha-card-header-font-size, 24px);
         letter-spacing: -0.012em;
-        line-height: 32px;
-        padding: 24px 16px 16px;
+        line-height: 48px;
+        padding: 12px 16px 16px;
         display: block;
+        margin-block-start: 0px;
+        margin-block-end: 0px;
+        font-weight: normal;
       }
 
       :host ::slotted(.card-content:not(:first-child)),
@@ -75,7 +78,7 @@ export class HaCard extends LitElement {
   protected render(): TemplateResult {
     return html`
       ${this.header
-        ? html` <div class="card-header">${this.header}</div> `
+        ? html`<h1 class="card-header">${this.header}</h1>`
         : html``}
       <slot></slot>
     `;
diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts
index b1655fab2..34d25caf7 100644
--- a/src/panels/config/devices/ha-config-device-page.ts
+++ b/src/panels/config/devices/ha-config-device-page.ts
@@ -259,7 +259,7 @@ export class HaConfigDevicePage extends LitElement {
               isComponentLoaded(this.hass, "automation")
                 ? html`
                     <ha-card>
-                      <div class="card-header">
+                      <h1 class="card-header">
                         ${this.hass.localize(
                           "ui.panel.config.devices.automation.automations"
                         )}
@@ -270,7 +270,7 @@ export class HaConfigDevicePage extends LitElement {
                           )}
                           icon="hass:plus-circle"
                         ></ha-icon-button>
-                      </div>
+                      </h1>
                       ${this._related?.automation?.length
                         ? this._related.automation.map((automation) => {
                             const state = this.hass.states[automation];
@@ -328,7 +328,7 @@ export class HaConfigDevicePage extends LitElement {
               isComponentLoaded(this.hass, "scene") && entities.length
                 ? html`
                     <ha-card>
-                        <div class="card-header">
+                        <h1 class="card-header">
                           ${this.hass.localize(
                             "ui.panel.config.devices.scene.scenes"
                           )}
@@ -340,7 +340,7 @@ export class HaConfigDevicePage extends LitElement {
                                     )}
                                     icon="hass:plus-circle"
                                   ></ha-icon-button>
-                        </div>
+                        </h1>
 
                         ${
                           this._related?.scene?.length
@@ -402,7 +402,7 @@ export class HaConfigDevicePage extends LitElement {
                 isComponentLoaded(this.hass, "script")
                   ? html`
                       <ha-card>
-                        <div class="card-header">
+                        <h1 class="card-header">
                           ${this.hass.localize(
                             "ui.panel.config.devices.script.scripts"
                           )}
@@ -413,7 +413,7 @@ export class HaConfigDevicePage extends LitElement {
                             )}
                             icon="hass:plus-circle"
                           ></ha-icon-button>
-                        </div>
+                        </h1>
                         ${this._related?.script?.length
                           ? this._related.script.map((script) => {
                               const state = this.hass.states[script];
diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts
index 5c3526ff2..480a3343e 100644
--- a/src/panels/config/scene/ha-scene-editor.ts
+++ b/src/panels/config/scene/ha-scene-editor.ts
@@ -268,7 +268,7 @@ export class HaSceneEditor extends SubscribeMixin(
                     (device) =>
                       html`
                         <ha-card>
-                          <div class="card-header">
+                          <h1 class="card-header">
                             ${device.name}
                             <ha-icon-button
                               icon="hass:delete"
@@ -278,7 +278,7 @@ export class HaSceneEditor extends SubscribeMixin(
                               .device=${device.id}
                               @click=${this._deleteDevice}
                             ></ha-icon-button>
-                          </div>
+                          </h1>
                           ${device.entities.map((entityId) => {
                             const entityStateObj = this.hass.states[entityId];
                             if (!entityStateObj) {
diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts
index cc9332790..d23d32cce 100644
--- a/src/panels/lovelace/cards/hui-entities-card.ts
+++ b/src/panels/lovelace/cards/hui-entities-card.ts
@@ -186,7 +186,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
         ${!this._config.title && !this._showHeaderToggle && !this._config.icon
           ? ""
           : html`
-              <div class="card-header">
+              <h1 class="card-header">
                 <div class="name">
                   ${this._config.icon
                     ? html`
@@ -208,7 +208,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
                         ) as EntityConfig[]).map((conf) => conf.entity)}
                       ></hui-entities-toggle>
                     `}
-              </div>
+              </h1>
             `}
         <div id="states" class="card-content">
           ${this._configEntities!.map((entityConf) =>
diff --git a/src/panels/lovelace/cards/hui-stack-card.ts b/src/panels/lovelace/cards/hui-stack-card.ts
index d4126bbf3..dfe7a0ec6 100644
--- a/src/panels/lovelace/cards/hui-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-stack-card.ts
@@ -75,7 +75,7 @@ export abstract class HuiStackCard extends LitElement implements LovelaceCard {
 
     return html`
       ${this._config.title
-        ? html` <div class="card-header">${this._config.title}</div> `
+        ? html`<h1 class="card-header">${this._config.title}</h1>`
         : ""}
       <div id="root">${this._cards}</div>
     `;