diff --git a/dist/binary-control-button-row.js b/dist/binary-control-button-row.js
index d59b116..00682df 100644
--- a/dist/binary-control-button-row.js
+++ b/dist/binary-control-button-row.js
@@ -6,12 +6,48 @@ window.customCards.push({
   preview: false,
 });
 
-class CustomBinaryRow extends Polymer.Element {
+const LitElement = customElements.get("ha-panel-lovelace") ? Object.getPrototypeOf(customElements.get("ha-panel-lovelace")) : Object.getPrototypeOf(customElements.get("hc-lovelace"));
+const html = LitElement.prototype.html;
+const css = LitElement.prototype.css;
 
-	static get template() {
-		return Polymer.html`
-		<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
-		<style>
+class CustomBinaryRow extends LitElement {
+
+	constructor() {
+		super();
+		this._config = {
+			customTheme: false,
+			reverseButtons: false,
+			width: '30px',
+			height: '30px',
+			isOnColor: '#43A047',
+			isOffColor: '#f44c09',
+			buttonInactiveColor: '#759aaa',
+			customOffText: 'OFF',
+			customOnText: 'ON',
+
+		};
+	}
+
+	static get properties() {
+		return {
+			hass: Object,
+			_config: Object,
+			_stateObj: Object,
+			_width: String,
+			_height: String,
+			_leftColor: String,
+			_leftText: String,
+			_leftName: String,
+			_leftState: Boolean,
+			_rightColor: String,
+			_rightText: String,
+			_rightName: String,
+			_rightState: Boolean,
+		};
+	}
+
+	static get styles() {
+		return css`
 			:host {
 				line-height: inherit;
 			}
@@ -24,72 +60,52 @@ class CustomBinaryRow extends Polymer.Element {
 				font-size: 10px !important;
 				color: inherit;
 				text-align: center;
-				float: right !important;
+				float: left !important;
 				padding: 1px;
 				cursor: pointer;
 			}
-		</style>
-		<hui-generic-entity-row hass="[[hass]]" config="[[_config]]">
-			<div class='horizontal justified layout' on-click="stopPropagation">
-				<button
-					class='switch'
-					style='[[_leftColor]];min-width:[[_width]];max-width:[[_width]];height:[[_height]]'
-					toggles name='[[_leftName]]'
-					on-click='setState'
-					disabled='[[_leftState]]'>[[_leftText]]</button>
-				<button
-					class='switch'
-					style='[[_rightColor]];min-width:[[_width]];max-width:[[_width]];height:[[_height]]'
-					toggles name='[[_rightName]]'
-					on-click='setState'
-					disabled='[[_rightState]]'>[[_rightText]]</button>
-			</div>
-		</hui-generic-entity-row>
 		`;
 	}
 
-	static get properties() {
-		return {
-			hass: {
-				type: Object,
-				observer: 'hassChanged'
-			},
-			_config: Object,
-			_stateObj: Object,
-			_width: String,
-			_height: String,
-			_leftColor: String,
-			_leftText: String,
-			_leftName: String,
-			_leftState: Boolean,
-			_rightColor: String,
-			_rightText: String,
-			_rightName: String,
-			_rightState: Boolean,
-	        }
-    	}
+	render() {
+		return html`
+			<hui-generic-entity-row .hass="${this.hass}" .config="${this._config}">
+				<div id='button-container' class='horizontal justified layout'>
+					<button
+						class='switch'
+						style='${this._leftColor};min-width:${this._width};max-width:${this._width};height:${this._height}'
+						toggles name="${this._leftName}"
+						@click=${this.setState}
+						.disabled=${this._leftState}>${this._leftText}</button>
+					<button
+						class='switch'
+						style='${this._rightColor};min-width:${this._width};max-width:${this._width};height:${this._height}'
+						toggles name="${this._rightName}"
+						@click=${this.setState}
+						.disabled=${this._rightState}>${this._rightText}</button>
+				</div>
+			</hui-generic-entity-row>
+		`;
+	}
+
+	firstUpdated() {
+		super.firstUpdated();
+		this.shadowRoot.getElementById('button-container').addEventListener('click', (ev) => ev.stopPropagation());
+	}
 
 	setConfig(config) {
-		this._config = config;
+		this._config = { ...this._config, ...config };
+	}
 
-		this._config = {
-			customTheme: false,
-			reverseButtons: false,
-			width: '30px',
-			height: '30px',
-			isOnColor: '#43A047',
-			isOffColor: '#f44c09',
-			buttonInactiveColor: '#759aaa',
-			customOffText: 'OFF',
-			customOnText: 'ON',
-			...config
-		};
+	updated(changedProperties) {
+		if (changedProperties.has("hass")) {
+			this.hassChanged();
+		}
 	}
 
 	hassChanged(hass) {
-
 		const config = this._config;
-		const stateObj = hass.states[config.entity];
+		const stateObj = this.hass.states[config.entity];
 		const custTheme = config.customTheme;
 		const revButtons = config.reverseButtons;
 		const buttonWidth = config.width;
@@ -155,41 +171,33 @@ class CustomBinaryRow extends Polymer.Element {
 		let onname = 'on';
 	
 		if (revButtons) {
-			this.setProperties({
-				_stateObj: stateObj,
-				_rightState: stateObj.state === 'on',
-				_leftState: stateObj.state == 'off',
-				_width: buttonwidth,
-				_height: buttonheight,
-				_rightName: onname,
-				_leftName: offname,
-				_rightColor: oncolor,
-				_leftColor: offcolor,
-				_rightText: ontext,
-				_leftText: offtext,
-			});
+				this._stateObj = stateObj;
+				this._rightState = stateObj.state === 'on';
+				this._leftState = stateObj.state == 'off';
+				this._width = buttonwidth;
+				this._height = buttonheight;
+				this._rightName = onname;
+				this._leftName = offname;
+				this._rightColor = oncolor;
+				this._leftColor = offcolor;
+				this._rightText = ontext;
+				this._leftText = offtext;
 		} else {
-			this.setProperties({
-				_stateObj: stateObj,
-				_leftState: stateObj.state === 'on',
-				_rightState: stateObj.state == 'off',
-				_width: buttonwidth,
-				_height: buttonheight,
-				_leftName: onname,
-				_rightName: offname,
-				_leftColor: oncolor,
-				_rightColor: offcolor,
-				_leftText: ontext,
-				_rightText: offtext,	
-			});
+				this._stateObj = stateObj;
+				this._leftState = stateObj.state === 'on';
+				this._rightState = stateObj.state == 'off';
+				this._width = buttonwidth;
+				this._height = buttonheight;
+				this._leftName = onname;
+				this._rightName = offname;
+				this._leftColor = oncolor;
+				this._rightColor = offcolor;
+				this._leftText = ontext;
+				this._rightText = offtext;
 		}
-    	}
+    }
 
 
-	stopPropagation(e) {
-		e.stopPropagation();
-	}
-
 	setState(e) {
 		const state = e.currentTarget.getAttribute('name');
 		if( state == 'off' ){