diff --git a/src/dialogs/more-info/controls/more-info-counter.ts b/src/dialogs/more-info/controls/more-info-counter.ts
index 6439386425..64353f0407 100644
--- a/src/dialogs/more-info/controls/more-info-counter.ts
+++ b/src/dialogs/more-info/controls/more-info-counter.ts
@@ -10,6 +10,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import { HomeAssistant } from "../../../types";
+import { UNAVAILABLE_STATES } from "../../../data/entity";
 
 @customElement("more-info-counter")
 class MoreInfoCounter extends LitElement {
@@ -22,21 +23,29 @@ class MoreInfoCounter extends LitElement {
       return html``;
     }
 
+    const disabled = UNAVAILABLE_STATES.includes(this.stateObj!.state);
+
     return html`
       <div class="actions">
         <mwc-button
           .action="${"increment"}"
-          @click="${this._handleActionClick}"
+          @click=${this._handleActionClick}
+          .disabled=${disabled}
         >
           ${this.hass!.localize("ui.card.counter.actions.increment")}
         </mwc-button>
         <mwc-button
           .action="${"decrement"}"
-          @click="${this._handleActionClick}"
+          @click=${this._handleActionClick}
+          .disabled=${disabled}
         >
           ${this.hass!.localize("ui.card.counter.actions.decrement")}
         </mwc-button>
-        <mwc-button .action="${"reset"}" @click="${this._handleActionClick}">
+        <mwc-button
+          .action="${"reset"}"
+          @click=${this._handleActionClick}
+          .disabled=${disabled}
+        >
           ${this.hass!.localize("ui.card.counter.actions.reset")}
         </mwc-button>
       </div>
@@ -53,8 +62,7 @@ class MoreInfoCounter extends LitElement {
   static get styles(): CSSResult {
     return css`
       .actions {
-        margin: 0;
-        padding-top: 20px;
+        margin: 8px 0;
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
diff --git a/src/dialogs/more-info/controls/more-info-person.ts b/src/dialogs/more-info/controls/more-info-person.ts
index 84fa6a733b..4caa2ea3d3 100644
--- a/src/dialogs/more-info/controls/more-info-person.ts
+++ b/src/dialogs/more-info/controls/more-info-person.ts
@@ -75,7 +75,7 @@ class MoreInfoPerson extends LitElement {
         justify-content: space-between;
       }
       .actions {
-        margin: 36px 0 8px 0;
+        margin: 8px 0;
         text-align: right;
       }
       ha-map {
diff --git a/src/dialogs/more-info/controls/more-info-timer.ts b/src/dialogs/more-info/controls/more-info-timer.ts
index 3ffa9c5b16..80f8819009 100644
--- a/src/dialogs/more-info/controls/more-info-timer.ts
+++ b/src/dialogs/more-info/controls/more-info-timer.ts
@@ -76,8 +76,7 @@ class MoreInfoTimer extends LitElement {
   static get styles(): CSSResult {
     return css`
       .actions {
-        margin: 0;
-        padding-top: 20px;
+        margin: 8px 0;
         display: flex;
         flex-wrap: wrap;
         justify-content: center;