diff --git a/config/babel.js b/config/babel.js
index 3a9fbe452c..67021b92c4 100644
--- a/config/babel.js
+++ b/config/babel.js
@@ -33,6 +33,14 @@ module.exports.babelLoaderConfig = ({ latestBuild }) => {
               pragma: "h",
             },
           ],
+          [
+            require("@babel/plugin-proposal-decorators").default,
+            { decoratorsBeforeExport: true },
+          ],
+          [
+            require("@babel/plugin-proposal-class-properties").default,
+            { loose: true },
+          ],
         ],
       },
     },
diff --git a/package.json b/package.json
index 3897186109..d704eb4b9b 100644
--- a/package.json
+++ b/package.json
@@ -95,6 +95,8 @@
   "devDependencies": {
     "@babel/core": "^7.1.2",
     "@babel/plugin-external-helpers": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.3.0",
+    "@babel/plugin-proposal-decorators": "^7.3.0",
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/plugin-transform-react-jsx": "^7.0.0",
@@ -111,22 +113,22 @@
     "compression-webpack-plugin": "^2.0.0",
     "copy-webpack-plugin": "^4.5.2",
     "del": "^3.0.0",
+    "eslint": "^5.6.0",
     "eslint-config-airbnb-base": "^13.1.0",
     "eslint-config-prettier": "^4.0.0",
     "eslint-import-resolver-webpack": "^0.10.1",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-react": "^7.11.1",
-    "eslint": "^5.6.0",
+    "gulp": "^3.9.1",
     "gulp-foreach": "^0.1.0",
-    "gulp-hash-filename": "^2.0.1",
     "gulp-hash": "^4.2.2",
+    "gulp-hash-filename": "^2.0.1",
     "gulp-insert": "^0.5.0",
     "gulp-json-transform": "^0.4.5",
     "gulp-jsonminify": "^1.1.0",
     "gulp-merge-json": "^1.3.1",
     "gulp-rename": "^1.4.0",
-    "gulp": "^3.9.1",
     "html-loader": "^0.5.5",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^1.1.0",
@@ -141,17 +143,17 @@
     "require-dir": "^1.0.0",
     "sinon": "^7.1.1",
     "ts-mocha": "^2.0.0",
+    "tslint": "^5.11.0",
     "tslint-config-prettier": "^1.15.0",
     "tslint-eslint-rules": "^5.4.0",
     "tslint-plugin-prettier": "^2.0.1",
-    "tslint": "^5.11.0",
     "typescript": "^3.1.4",
     "uglifyjs-webpack-plugin": "^2.1.1",
     "wct-browser-legacy": "^1.0.1",
     "web-component-tester": "^6.8.0",
+    "webpack": "^4.19.1",
     "webpack-cli": "^3.1.0",
     "webpack-dev-server": "^3.1.8",
-    "webpack": "^4.19.1",
     "workbox-webpack-plugin": "^3.5.0"
   },
   "resolutions": {
diff --git a/src/components/entity/ha-entity-toggle.ts b/src/components/entity/ha-entity-toggle.ts
index 32d7140ac5..42a622a9e2 100644
--- a/src/components/entity/ha-entity-toggle.ts
+++ b/src/components/entity/ha-entity-toggle.ts
@@ -9,7 +9,7 @@ import {
   html,
   CSSResult,
   css,
-  PropertyDeclarations,
+  property,
 } from "lit-element";
 import { HomeAssistant } from "../../types";
 import { HassEntity } from "home-assistant-js-websocket";
@@ -17,7 +17,7 @@ import { HassEntity } from "home-assistant-js-websocket";
 class HaEntityToggle extends LitElement {
   // hass is not a property so that we only re-render on stateObj changes
   public hass?: HomeAssistant;
-  public stateObj?: HassEntity;
+  @property() public stateObj?: HassEntity;
 
   protected render(): TemplateResult | void {
     if (!this.stateObj) {
@@ -51,12 +51,6 @@ class HaEntityToggle extends LitElement {
     `;
   }
 
-  static get properties(): PropertyDeclarations {
-    return {
-      stateObj: {},
-    };
-  }
-
   protected firstUpdated(changedProps) {
     super.firstUpdated(changedProps);
     this.addEventListener("click", (ev) => ev.stopPropagation());
diff --git a/src/components/ha-sidebar.ts b/src/components/ha-sidebar.ts
index 035d1c1802..4cc5aaddf9 100644
--- a/src/components/ha-sidebar.ts
+++ b/src/components/ha-sidebar.ts
@@ -3,8 +3,8 @@ import {
   html,
   CSSResult,
   css,
-  PropertyDeclarations,
   PropertyValues,
+  property,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
@@ -82,13 +82,9 @@ const computePanels = (hass: HomeAssistant) => {
  * @appliesMixin LocalizeMixin
  */
 class HaSidebar extends LitElement {
-  public hass?: HomeAssistant;
-  public _defaultPage?: string;
-
-  constructor() {
-    super();
-    this._defaultPage = localStorage.defaultPage || DEFAULT_PANEL;
-  }
+  @property() public hass?: HomeAssistant;
+  @property() public _defaultPage?: string =
+    localStorage.defaultPage || DEFAULT_PANEL;
 
   protected render() {
     const hass = this.hass;
@@ -217,13 +213,6 @@ class HaSidebar extends LitElement {
     `;
   }
 
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _defaultPage: {},
-    };
-  }
-
   protected shouldUpdate(changedProps: PropertyValues): boolean {
     if (!this.hass || !changedProps.has("hass")) {
       return false;
diff --git a/src/layouts/app/hass-base-mixin.ts b/src/layouts/app/hass-base-mixin.ts
index f748aca450..33b35200f3 100644
--- a/src/layouts/app/hass-base-mixin.ts
+++ b/src/layouts/app/hass-base-mixin.ts
@@ -1,4 +1,8 @@
-import { Constructor } from "lit-element";
+import {
+  Constructor,
+  // @ts-ignore
+  property,
+} from "lit-element";
 import { HomeAssistant } from "../../types";
 
 /* tslint:disable */
@@ -17,14 +21,9 @@ export class HassBaseEl {
 export default <T>(superClass: Constructor<T>): Constructor<T & HassBaseEl> =>
   // @ts-ignore
   class extends superClass {
-    private __provideHass: HTMLElement[];
+    private __provideHass: HTMLElement[] = [];
     // @ts-ignore
-    protected hass: HomeAssistant;
-
-    constructor() {
-      super();
-      this.__provideHass = [];
-    }
+    @property() protected hass: HomeAssistant;
 
     // Exists so all methods can safely call super method
     protected hassConnected() {
diff --git a/src/layouts/app/home-assistant.ts b/src/layouts/app/home-assistant.ts
index 6f5fc8a8b0..e7141e3b46 100644
--- a/src/layouts/app/home-assistant.ts
+++ b/src/layouts/app/home-assistant.ts
@@ -1,11 +1,5 @@
 import "@polymer/app-route/app-location";
-import {
-  html,
-  LitElement,
-  PropertyDeclarations,
-  PropertyValues,
-  css,
-} from "lit-element";
+import { html, LitElement, PropertyValues, css, property } from "lit-element";
 
 import "../home-assistant-main";
 import "../ha-init-page";
@@ -43,19 +37,9 @@ export class HomeAssistantAppEl extends ext(HassBaseMixin(LitElement), [
   NotificationMixin,
   dialogManagerMixin,
 ]) {
-  private _route?: Route;
-  private _error?: boolean;
-  private _panelUrl?: string;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _route: {},
-      _routeData: {},
-      _panelUrl: {},
-      _error: {},
-    };
-  }
+  @property() private _route?: Route;
+  @property() private _error?: boolean;
+  @property() private _panelUrl?: string;
 
   protected render() {
     const hass = this.hass;
diff --git a/src/layouts/home-assistant-main.ts b/src/layouts/home-assistant-main.ts
index 8f94618e62..58679ff86a 100644
--- a/src/layouts/home-assistant-main.ts
+++ b/src/layouts/home-assistant-main.ts
@@ -2,10 +2,10 @@ import {
   LitElement,
   html,
   TemplateResult,
-  PropertyDeclarations,
   CSSResult,
   css,
   PropertyValues,
+  property,
 } from "lit-element";
 import "@polymer/app-layout/app-drawer-layout/app-drawer-layout";
 import "@polymer/app-layout/app-drawer/app-drawer";
@@ -33,17 +33,9 @@ declare global {
 }
 
 class HomeAssistantMain extends LitElement {
-  public hass?: HomeAssistant;
-  public route?: Route;
-  private _narrow?: boolean;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _narrow: {},
-      route: {},
-    };
-  }
+  @property() public hass?: HomeAssistant;
+  @property() public route?: Route;
+  @property() private _narrow?: boolean;
 
   protected render(): TemplateResult | void {
     const hass = this.hass;
diff --git a/src/layouts/partial-panel-resolver.ts b/src/layouts/partial-panel-resolver.ts
index 1b58560bb2..db43495ebb 100644
--- a/src/layouts/partial-panel-resolver.ts
+++ b/src/layouts/partial-panel-resolver.ts
@@ -1,9 +1,4 @@
-import {
-  LitElement,
-  html,
-  PropertyDeclarations,
-  PropertyValues,
-} from "lit-element";
+import { LitElement, html, PropertyValues, property } from "lit-element";
 
 import "./hass-loading-screen";
 import { HomeAssistant, Panel, PanelElement, Route } from "../types";
@@ -112,34 +107,16 @@ function ensureLoaded(panel): Promise<void> | null {
 }
 
 class PartialPanelResolver extends LitElement {
-  public hass?: HomeAssistant;
-  public narrow?: boolean;
-  public showMenu?: boolean;
-  public route?: Route | null;
+  @property() public hass?: HomeAssistant;
+  @property() public narrow?: boolean;
+  @property() public showMenu?: boolean;
+  @property() public route?: Route | null;
 
-  private _routeTail?: Route | null;
+  @property() private _routeTail?: Route | null;
+  @property() private _panelEl?: PanelElement;
+  @property() private _error?: boolean;
   private _panel?: Panel;
-  private _panelEl?: PanelElement;
-  private _error?: boolean;
-  private _cache: { [name: string]: PanelElement };
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      narrow: {},
-      showMenu: {},
-      route: {},
-
-      _routeTail: {},
-      _error: {},
-      _panelEl: {},
-    };
-  }
-
-  constructor() {
-    super();
-    this._cache = {};
-  }
+  private _cache: { [name: string]: PanelElement } = {};
 
   protected render() {
     if (this._error) {
diff --git a/src/panels/lovelace/cards/hui-light-card.ts b/src/panels/lovelace/cards/hui-light-card.ts
index e6e1c2678b..785eb339e2 100644
--- a/src/panels/lovelace/cards/hui-light-card.ts
+++ b/src/panels/lovelace/cards/hui-light-card.ts
@@ -2,8 +2,8 @@ import {
   html,
   LitElement,
   PropertyValues,
-  PropertyDeclarations,
   TemplateResult,
+  property,
 } from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button";
 
@@ -53,20 +53,11 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
     return {};
   }
 
-  public hass?: HomeAssistant;
-  private _config?: Config;
+  @property() public hass?: HomeAssistant;
+  @property() private _config?: Config;
+  @property() private _roundSliderStyle?: TemplateResult;
+  @property() private _jQuery?: any;
   private _brightnessTimout?: number;
-  private _roundSliderStyle?: TemplateResult;
-  private _jQuery?: any;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      _config: {},
-      roundSliderStyle: {},
-      _jQuery: {},
-    };
-  }
 
   public getCardSize(): number {
     return 2;
diff --git a/src/panels/lovelace/components/hui-generic-entity-row.ts b/src/panels/lovelace/components/hui-generic-entity-row.ts
index 2409179b65..d9916ffe69 100644
--- a/src/panels/lovelace/components/hui-generic-entity-row.ts
+++ b/src/panels/lovelace/components/hui-generic-entity-row.ts
@@ -5,25 +5,20 @@ import "../../../components/ha-icon";
 import computeStateName from "../../../common/entity/compute_state_name";
 import {
   LitElement,
-  PropertyDeclarations,
   html,
   css,
   CSSResult,
   PropertyValues,
+  property,
 } from "lit-element";
 import { HomeAssistant } from "../../../types";
 import { EntitiesCardEntityConfig } from "../cards/hui-entities-card";
 import { computeRTL } from "../../../common/util/compute_rtl";
 
 class HuiGenericEntityRow extends LitElement {
-  public hass?: HomeAssistant;
-  public config?: EntitiesCardEntityConfig;
-  public showSecondary: boolean;
-
-  constructor() {
-    super();
-    this.showSecondary = true;
-  }
+  @property() public hass?: HomeAssistant;
+  @property() public config?: EntitiesCardEntityConfig;
+  @property() public showSecondary: boolean = true;
 
   protected render() {
     if (!this.hass || !this.config) {
@@ -70,14 +65,6 @@ class HuiGenericEntityRow extends LitElement {
     `;
   }
 
-  static get properties(): PropertyDeclarations {
-    return {
-      hass: {},
-      config: {},
-      showSecondary: {},
-    };
-  }
-
   protected updated(changedProps: PropertyValues) {
     super.updated(changedProps);
     if (changedProps.has("hass")) {
diff --git a/tsconfig.json b/tsconfig.json
index b9c04a1dbe..ddc30c8b56 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,6 +14,7 @@
     "strict": true,
     "noImplicitAny": false,
     "skipLibCheck": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "experimentalDecorators": true
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 200a944979..800cf3275f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -72,6 +72,17 @@
     "@babel/traverse" "^7.1.0"
     "@babel/types" "^7.0.0"
 
+"@babel/helper-create-class-features-plugin@^7.3.0":
+  version "7.3.2"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.3.2.tgz#ba1685603eb1c9f2f51c9106d5180135c163fe73"
+  integrity sha512-tdW8+V8ceh2US4GsYdNVNoohq5uVwOf9k6krjwW4E1lINcHgttnWcNqgdoessn12dAy8QkbezlbQh2nXISNY+A==
+  dependencies:
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-member-expression-to-functions" "^7.0.0"
+    "@babel/helper-optimise-call-expression" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/helper-replace-supers" "^7.2.3"
+
 "@babel/helper-define-map@^7.1.0":
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.1.0.tgz#3b74caec329b3c80c116290887c0dd9ae468c20c"
@@ -168,7 +179,7 @@
     "@babel/traverse" "^7.1.0"
     "@babel/types" "^7.0.0"
 
-"@babel/helper-replace-supers@^7.1.0":
+"@babel/helper-replace-supers@^7.1.0", "@babel/helper-replace-supers@^7.2.3":
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.2.3.tgz#19970020cf22677d62b3a689561dbd9644d8c5e5"
   integrity sha512-GyieIznGUfPXPWu0yLS6U55Mz67AZD9cUk0BfirOWlPrXlBcan9Gz+vHGz+cPfuoweZSnPzPIm67VtQM0OWZbA==
@@ -247,6 +258,23 @@
     "@babel/helper-remap-async-to-generator" "^7.1.0"
     "@babel/plugin-syntax-async-generators" "^7.2.0"
 
+"@babel/plugin-proposal-class-properties@^7.3.0":
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.3.0.tgz#272636bc0fa19a0bc46e601ec78136a173ea36cd"
+  integrity sha512-wNHxLkEKTQ2ay0tnsam2z7fGZUi+05ziDJflEt3AZTP3oXLKHJp9HqhfroB/vdMvt3sda9fAbq7FsG8QPDrZBg==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.3.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
+"@babel/plugin-proposal-decorators@^7.3.0":
+  version "7.3.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.3.0.tgz#637ba075fa780b1f75d08186e8fb4357d03a72a7"
+  integrity sha512-3W/oCUmsO43FmZIqermmq6TKaRSYhmh/vybPfVFwQWdSb8xwki38uAIvknCRzuyHRuYfCYmJzL9or1v0AffPjg==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.3.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-decorators" "^7.2.0"
+
 "@babel/plugin-proposal-json-strings@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz#568ecc446c6148ae6b267f02551130891e29f317"
@@ -287,6 +315,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-syntax-decorators@^7.2.0":
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.2.0.tgz#c50b1b957dcc69e4b1127b65e1c33eef61570c1b"
+  integrity sha512-38QdqVoXdHUQfTpZo3rQwqQdWtCn5tMv4uV6r2RMfTqNBuv4ZBhz79SfaQWKTVmxHjeFv/DnXVC/+agHCklYWA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-syntax-dynamic-import@^7.0.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz#69c159ffaf4998122161ad8ebc5e6d1f55df8612"