diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts
index 471905673f..ace68a84f3 100644
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@@ -27,9 +27,11 @@ class HaCard extends LitElement {
         color: var(--primary-text-color);
         display: block;
         transition: all 0.3s ease-out;
+        position: relative;
       }
-      .header:not(:empty),
-      .header::slotted(*) {
+
+      .card-header,
+      :host ::slotted(.card-header) {
         color: var(--ha-card-header-color, --primary-text-color);
         font-family: var(--ha-card-header-font-family, inherit);
         font-size: var(--ha-card-header-font-size, 24px);
@@ -38,12 +40,31 @@ class HaCard extends LitElement {
         padding: 24px 16px 16px;
         display: block;
       }
+
+      :host ::slotted(.card-content:not(:first-child)),
+      slot:not(:first-child)::slotted(.card-content) {
+        padding-top: 0px;
+        margin-top: -8px;
+      }
+
+      :host ::slotted(.card-content) {
+        padding: 16px;
+      }
+
+      :host ::slotted(.card-actions) {
+        border-top: 1px solid #e8e8e8;
+        padding: 5px 16px;
+      }
     `;
   }
 
   protected render(): TemplateResult {
     return html`
-      <slot class="header" name="header">${this.header}</slot>
+      ${this.header
+        ? html`
+            <div class="card-header">${this.header}</div>
+          `
+        : html``}
       <slot></slot>
     `;
   }
diff --git a/src/panels/lovelace/cards/hui-entities-card.ts b/src/panels/lovelace/cards/hui-entities-card.ts
index 0e7ca75f1b..c1d4825e20 100644
--- a/src/panels/lovelace/cards/hui-entities-card.ts
+++ b/src/panels/lovelace/cards/hui-entities-card.ts
@@ -89,7 +89,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
         ${!title && !show_header_toggle
           ? html``
           : html`
-              <div class="header" slot="header">
+              <div class="card-header">
                 <div class="name">${title}</div>
                 ${show_header_toggle === false
                   ? html``
@@ -103,7 +103,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
                     `}
               </div>
             `}
-        <div id="states">
+        <div id="states" class="card-content">
           ${this._configEntities!.map((entityConf) =>
             this.renderEntity(entityConf)
           )}
@@ -114,8 +114,19 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
 
   static get styles(): CSSResult {
     return css`
-      #states {
-        padding: 12px 16px;
+      .card-header {
+        display: flex;
+        justify-content: space-between;
+      }
+
+      .card-header .name {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      .card-header hui-entities-toggle {
+        margin: -4px 0;
       }
 
       #states > * {
@@ -126,19 +137,6 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
         overflow: hidden;
       }
 
-      .header {
-        margin-bottom: -8px;
-        padding-bottom: 0px;
-        display: flex;
-        justify-content: space-between;
-      }
-
-      .header .name {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
       .state-card-dialog {
         cursor: pointer;
       }