diff --git a/src/components/ha-button-toggle-group.ts b/src/components/ha-button-toggle-group.ts
index 3e24636d8e..ce07e95dd1 100644
--- a/src/components/ha-button-toggle-group.ts
+++ b/src/components/ha-button-toggle-group.ts
@@ -1,7 +1,8 @@
 import "@material/mwc-button/mwc-button";
+import type { Button } from "@material/mwc-button/mwc-button";
 import "@material/mwc-icon-button/mwc-icon-button";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, queryAll } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import { fireEvent } from "../common/dom/fire_event";
 import type { ToggleButton } from "../types";
@@ -17,6 +18,8 @@ export class HaButtonToggleGroup extends LitElement {
 
   @property({ type: Boolean }) public dense = false;
 
+  @queryAll("mwc-button") private _buttons?: Button[];
+
   protected render(): TemplateResult {
     return html`
       <div>
@@ -48,6 +51,16 @@ export class HaButtonToggleGroup extends LitElement {
     `;
   }
 
+  protected updated() {
+    // Work around Safari default margin that is not reset in mwc-button as of aug 2021
+    this._buttons?.forEach(async (button) => {
+      await button.updateComplete;
+      (
+        button.shadowRoot!.querySelector("button") as HTMLButtonElement
+      ).style.margin = "0";
+    });
+  }
+
   private _handleClick(ev): void {
     this.active = ev.currentTarget.value;
     fireEvent(this, "value-changed", { value: this.active });