diff --git a/src/components/entity/ha-entity-toggle.ts b/src/components/entity/ha-entity-toggle.ts
index 5a48bca525..bdbbdea1c2 100644
--- a/src/components/entity/ha-entity-toggle.ts
+++ b/src/components/entity/ha-entity-toggle.ts
@@ -153,7 +153,6 @@ class HaEntityToggle extends LitElement {
       }
       ha-switch {
         padding: 13px 5px;
-        margin: -4px -5px;
       }
     `;
   }
diff --git a/src/components/ha-switch.ts b/src/components/ha-switch.ts
index 36d81a1730..4e6a57ac65 100644
--- a/src/components/ha-switch.ts
+++ b/src/components/ha-switch.ts
@@ -1,4 +1,4 @@
-import { Constructor, customElement, CSSResult, css } from "lit-element";
+import { Constructor, customElement, CSSResult, css, query } from "lit-element";
 import "@material/mwc-switch";
 import { style } from "@material/mwc-switch/mwc-switch-css";
 // tslint:disable-next-line
@@ -8,23 +8,37 @@ const MwcSwitch = customElements.get("mwc-switch") as Constructor<Switch>;
 
 @customElement("ha-switch")
 export class HaSwitch extends MwcSwitch {
+  @query("slot") private _slot!: HTMLSlotElement;
+
   protected firstUpdated() {
     super.firstUpdated();
     this.style.setProperty("--mdc-theme-secondary", "var(--primary-color)");
+    this.classList.toggle(
+      "slotted",
+      Boolean(this._slot.assignedNodes().length)
+    );
   }
 
   protected static get styles(): CSSResult[] {
     return [
       style,
       css`
+        :host {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+        }
         .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
           background-color: var(--paper-toggle-button-unchecked-button-color);
           border-color: var(--paper-toggle-button-unchecked-button-color);
         }
         .mdc-switch:not(.mdc-switch--checked) .mdc-switch__track {
-          background-color: var(--paper-toggle-button-unchecked-bar-color;
+          background-color: var(--paper-toggle-button-unchecked-bar-color);
           border-color: var(--paper-toggle-button-unchecked-bar-color);
         }
+        :host(.slotted) .mdc-switch {
+          margin-right: 24px;
+        }
       `,
     ];
   }
diff --git a/src/panels/config/cloud/account/cloud-alexa-pref.ts b/src/panels/config/cloud/account/cloud-alexa-pref.ts
index 53f97f4394..1b6ad8eb1a 100644
--- a/src/panels/config/cloud/account/cloud-alexa-pref.ts
+++ b/src/panels/config/cloud/account/cloud-alexa-pref.ts
@@ -136,9 +136,8 @@ export class CloudAlexaPref extends LitElement {
         color: var(--primary-color);
       }
       .switch {
-        margin: -4px 0;
         position: absolute;
-        right: 8px;
+        right: 24px;
         top: 32px;
       }
       .card-actions {
diff --git a/src/panels/config/cloud/account/cloud-google-pref.ts b/src/panels/config/cloud/account/cloud-google-pref.ts
index 0a3b154d34..a0baa43b1a 100644
--- a/src/panels/config/cloud/account/cloud-google-pref.ts
+++ b/src/panels/config/cloud/account/cloud-google-pref.ts
@@ -141,9 +141,8 @@ export class CloudGooglePref extends LitElement {
         color: var(--primary-color);
       }
       .switch {
-        margin: -4px 0;
         position: absolute;
-        right: 8px;
+        right: 24px;
         top: 32px;
       }
       ha-call-api-button {
diff --git a/src/panels/config/cloud/account/cloud-remote-pref.ts b/src/panels/config/cloud/account/cloud-remote-pref.ts
index b349cabd4e..715b937fd8 100644
--- a/src/panels/config/cloud/account/cloud-remote-pref.ts
+++ b/src/panels/config/cloud/account/cloud-remote-pref.ts
@@ -121,9 +121,8 @@ export class CloudRemotePref extends LitElement {
         color: var(--primary-color);
       }
       .switch {
-        margin: -4px 0;
         position: absolute;
-        right: 8px;
+        right: 24px;
         top: 32px;
       }
       .card-actions {
diff --git a/src/panels/lovelace/editor/config-elements/config-elements-style.ts b/src/panels/lovelace/editor/config-elements/config-elements-style.ts
index 01b7b1672a..c5091d23f8 100644
--- a/src/panels/lovelace/editor/config-elements/config-elements-style.ts
+++ b/src/panels/lovelace/editor/config-elements/config-elements-style.ts
@@ -3,7 +3,7 @@ import { html } from "lit-element";
 export const configElementStyle = html`
   <style>
     ha-switch {
-      padding-top: 16px;
+      padding: 16px 0;
     }
     .side-by-side {
       display: flex;