diff --git a/src/cards/ha-camera-card.html b/src/cards/ha-camera-card.html
index 067719ab1..2029fde59 100644
--- a/src/cards/ha-camera-card.html
+++ b/src/cards/ha-camera-card.html
@@ -17,6 +17,7 @@
       border-radius: 2px;
     }
     .caption {
+      @apply(--paper-font-common-nowrap);
       position: absolute;
       left: 0px;
       right: 0px;
@@ -32,9 +33,6 @@
       font-weight: 500;
       line-height: 16px;
       color: white;
-      white-space: nowrap;
-      overflow-x: hidden;
-      text-overflow: ellipsis;
     }
   </style>
   <template>
diff --git a/src/cards/ha-entities-card.html b/src/cards/ha-entities-card.html
index e79e8d2a6..242b4cadb 100644
--- a/src/cards/ha-entities-card.html
+++ b/src/cards/ha-entities-card.html
@@ -15,13 +15,13 @@
       cursor: pointer;
     }
     .header {
-      font-size: 24px;
+      @apply(--paper-font-headline);
+      color: var(--primary-text-color);
       padding: 24px 16px 16px;
       text-transform: capitalize;
     }
     .header .name {
-      overflow: hidden;
-      text-overflow: ellipsis;
+      @apply(--paper-font-common-nowrap);
     }
     ha-entity-toggle {
       margin-left: 16px;
diff --git a/src/cards/ha-introduction-card.html b/src/cards/ha-introduction-card.html
index 3f36f2116..deafb1285 100644
--- a/src/cards/ha-introduction-card.html
+++ b/src/cards/ha-introduction-card.html
@@ -5,7 +5,7 @@
 <dom-module id='ha-introduction-card'>
   <style>
     :host {
-      font-size: 14px;
+      @apply(--paper-font-body1)
     }
     a {
       color: var(--dark-primary-color);
diff --git a/src/components/entity/ha-entity-toggle.html b/src/components/entity/ha-entity-toggle.html
index e166cb734..b46ca595a 100644
--- a/src/components/entity/ha-entity-toggle.html
+++ b/src/components/entity/ha-entity-toggle.html
@@ -5,6 +5,7 @@
 <dom-module id="ha-entity-toggle">
   <style>
     paper-icon-button {
+      color: var(--primary-text-color);
       transition: color .5s;
     }
     paper-icon-button[state-active] {
@@ -13,6 +14,7 @@
     paper-toggle-button {
       cursor: pointer;
       --paper-toggle-button-label-spacing: 0;
+      padding: 9px 0;
     }
   </style>
   <template>
diff --git a/src/components/entity/ha-entity-toggle.js b/src/components/entity/ha-entity-toggle.js
index c432c8180..b3bbcab40 100644
--- a/src/components/entity/ha-entity-toggle.js
+++ b/src/components/entity/ha-entity-toggle.js
@@ -25,6 +25,14 @@ export default new Polymer({
     },
   },
 
+  listeners: {
+    tap: 'onTap',
+  },
+
+  onTap(ev) {
+    ev.stopPropagation();
+  },
+
   ready() {
     this.forceStateChange();
   },
diff --git a/src/components/ha-card.html b/src/components/ha-card.html
index fe60d5192..7626381ab 100644
--- a/src/components/ha-card.html
+++ b/src/components/ha-card.html
@@ -11,7 +11,9 @@
       background-color: white;
     }
     .header {
-      font-size: 24px;
+      @apply(--paper-font-headline);
+      @apply(--paper-font-common-expensive-kerning);
+      opacity: var(--dark-primary-opacity);
       padding: 24px 16px 16px;
       text-transform: capitalize;
     }
diff --git a/src/components/logbook-entry.html b/src/components/logbook-entry.html
index d83174c1f..14c821246 100644
--- a/src/components/logbook-entry.html
+++ b/src/components/logbook-entry.html
@@ -8,6 +8,8 @@
   <style is="custom-style" include="iron-flex"></style>
   <style>
     :host {
+      @apply(--paper-font-body1);
+
       display: block;
       line-height: 2em;
     }
@@ -32,7 +34,7 @@
     }
 
     a {
-      color: var(--accent-color);
+      color: var(--primary-color);
     }
   </style>
   <template>
diff --git a/src/components/state-cards.html b/src/components/state-cards.html
deleted file mode 100644
index 41eca2d2d..000000000
--- a/src/components/state-cards.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<link rel="import" href="../state-summary/state-card.html">
-
-<dom-module id="state-cards">
-  <style is="custom-style" include="iron-flex"></style>
-  <style>
-  :host {
-    display: block;
-  }
-
-  @media all and (min-width: 1020px) {
-    .state-card {
-      width: calc(50% - 44px);
-      margin: 8px 0 0 8px;
-    }
-  }
-
-  @media all and (min-width: 1356px) {
-    .state-card {
-      width: calc(33% - 38px);
-    }
-  }
-
-  @media all and (min-width: 1706px) {
-    .state-card {
-      width: calc(25% - 42px);
-    }
-  }
-
-  .no-states-content {
-    max-width: 500px;
-    background-color: #fff;
-    border-radius: 2px;
-    box-shadow: rgba(0, 0, 0, 0.098) 0px 2px 4px, rgba(0, 0, 0, 0.098) 0px 0px 3px;
-    padding: 0 16px 8px;
-    margin: 16px;
-  }
-  </style>
-
-  <template>
-    <div class='horizontal layout wrap'>
-
-      <template is='dom-repeat' items="{{states}}">
-        <state-card class="state-card" state-obj="[[item]]"></state-card>
-      </template>
-
-      <template is='dom-if' if="[[computeEmptyStates(states)]]">
-        <div class='no-states-content'>
-          <h3>Hi there!</h3>
-          <p>
-            It looks like we have nothing to show you right now. It could be that we have not yet discovered all your devices but it is more likely that you have not configured Home Assistant yet.
-          </p>
-          <p>
-            Please see the <a href='https://home-assistant.io/getting-started/' target='_blank'>Getting Started</a> section on how to setup your devices.
-          </p>
-        </div>
-      </template>
-
-    </div>
-  </template>
-</dom-module>
diff --git a/src/components/state-cards.js b/src/components/state-cards.js
deleted file mode 100644
index 846e3e623..000000000
--- a/src/components/state-cards.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import Polymer from '../polymer';
-
-require('../state-summary/state-card');
-
-export default new Polymer({
-  is: 'state-cards',
-
-  properties: {
-    states: {
-      type: Array,
-      value: [],
-    },
-  },
-
-  computeEmptyStates(states) {
-    return states.length === 0;
-  },
-});
diff --git a/src/components/state-info.html b/src/components/state-info.html
index 5f3404d69..f87c6a8ca 100644
--- a/src/components/state-info.html
+++ b/src/components/state-info.html
@@ -6,7 +6,7 @@
 <dom-module id="state-info">
   <style>
   :host {
-    line-height: 1.5;
+    @apply(--paper-font-body1);
     min-width: 150px;
     white-space: nowrap;
   }
@@ -20,17 +20,19 @@
   }
 
   .name {
+    @apply(--paper-font-common-nowrap);
     text-transform: capitalize;
-    font-weight: 400;
-    text-overflow: ellipsis;
-    overflow-x: hidden;
+    color: var(--primary-text-color);
+    line-height: 40px;
+  }
+
+  .name[in-dialog] {
+    line-height: 20px;
   }
 
   .time-ago {
+    @apply(--paper-font-common-nowrap);
     color: var(--secondary-text-color);
-    margin-top: -2px;
-    text-overflow: ellipsis;
-    overflow-x: hidden;
   }
   </style>
 
@@ -39,11 +41,13 @@
       <state-badge state-obj='[[stateObj]]'></state-badge>
 
       <div class='info'>
-        <div class='name'>[[stateObj.entityDisplay]]</div>
+        <div class='name' in-dialog$='[[inDialog]]'>[[stateObj.entityDisplay]]</div>
 
-        <div class='time-ago'>
-          <relative-ha-datetime datetime-obj='[[stateObj.lastChangedAsDate]]'></relative-ha-datetime>
-        </div>
+        <template is='dom-if' if='[[inDialog]]'>
+          <div class='time-ago'>
+            <relative-ha-datetime datetime-obj='[[stateObj.lastChangedAsDate]]'></relative-ha-datetime>
+          </div>
+        </template>
 
       </div>
     </div>
diff --git a/src/components/state-info.js b/src/components/state-info.js
index 6bd1969f4..9370f0a80 100644
--- a/src/components/state-info.js
+++ b/src/components/state-info.js
@@ -7,6 +7,11 @@ export default new Polymer({
   is: 'state-info',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
diff --git a/src/dialogs/more-info-dialog.html b/src/dialogs/more-info-dialog.html
index 970699c3b..a327275ee 100644
--- a/src/dialogs/more-info-dialog.html
+++ b/src/dialogs/more-info-dialog.html
@@ -37,7 +37,7 @@
   <template>
     <!-- entry-animation='slide-up-animation' exit-animation='slide-down-animation' -->
     <paper-dialog id="dialog" with-backdrop opened='{{dialogOpen}}'>
-      <h2><state-card-content state-obj="[[stateObj]]"></state-card-content></h2>
+      <h2><state-card-content state-obj="[[stateObj]]" in-dialog></state-card-content></h2>
       <paper-dialog-scrollable>
       <template is='dom-if' if="[[showHistoryComponent]]">
         <state-history-charts state-history="[[stateHistory]]"
diff --git a/src/layouts/partial-dev-info.html b/src/layouts/partial-dev-info.html
index beba8f638..3cf17c509 100644
--- a/src/layouts/partial-dev-info.html
+++ b/src/layouts/partial-dev-info.html
@@ -22,11 +22,11 @@
     }
 
     .version {
-      font-size: 24px;
+      @apply(--paper-font-headline);
     }
 
     .develop {
-      font-size: 18px;
+      @apply(--paper-font-subhead);
     }
 
     .about a {
@@ -44,6 +44,7 @@
     }
 
     .error-log {
+      @apply(--paper-font-code1)
       clear: both;
       white-space: pre-wrap;
     }
@@ -83,7 +84,7 @@
           The following errors have been logged this session:
           <paper-icon-button icon='mdi:refresh' on-tap='refreshErrorLog'></paper-icon-button>
         </p>
-        <pre class='error-log'>[[errorLog]]</pre>
+        <div class='error-log'>[[errorLog]]</div>
       </div>
     </partial-base>
   </template>
diff --git a/src/state-summary/state-card-configurator.html b/src/state-summary/state-card-configurator.html
index cb6ebd970..0ca0ba85b 100644
--- a/src/state-summary/state-card-configurator.html
+++ b/src/state-summary/state-card-configurator.html
@@ -1,11 +1,26 @@
 <link rel='import' href='../../bower_components/polymer/polymer.html'>
+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
+
+<link rel="import" href="../components/state-info.html">
 
-<link rel='import' href='./state-card-display.html'>
 <link rel='import' href='../components/state-info.html'>
 
 <dom-module id='state-card-configurator'>
+  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+  <style>
+    paper-button {
+      color: var(--default-primary-color);
+      font-weight: 500;
+      top: 3px;
+      height: 37px;
+    }
+  </style>
+
   <template>
-    <state-card-display state-obj='[[stateObj]]'></state-card-display>
+    <div class='horizontal justified layout'>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
+      <paper-button hidden$='[[inDialog]]'>[[stateObj.state]]</paper-button>
+    </div>
 
     <!-- pre load the image so the dialog is rendered the proper size -->
     <template is='dom-if' if='[[stateObj.attributes.description_image]]'>
diff --git a/src/state-summary/state-card-configurator.js b/src/state-summary/state-card-configurator.js
index 3ef0ee62c..31b6857df 100644
--- a/src/state-summary/state-card-configurator.js
+++ b/src/state-summary/state-card-configurator.js
@@ -7,6 +7,11 @@ export default new Polymer({
   is: 'state-card-configurator',
 
   properties: {
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
diff --git a/src/state-summary/state-card-content.js b/src/state-summary/state-card-content.js
index 29a85ca7c..0e81649d2 100644
--- a/src/state-summary/state-card-content.js
+++ b/src/state-summary/state-card-content.js
@@ -19,16 +19,24 @@ export default new Polymer({
   is: 'state-card-content',
 
   properties: {
+    inDialog: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
-      observer: 'stateObjChanged',
     },
   },
 
-  stateObjChanged(stateObj) {
+  observers: [
+    'inputChanged(inDialog, stateObj)',
+  ],
+
+  inputChanged(inDialog, stateObj) {
     if (!stateObj) return;
 
     dynamicContentUpdater(
-      this, `STATE-CARD-${stateCardType(stateObj).toUpperCase()}`, { stateObj });
+      this, `STATE-CARD-${stateCardType(stateObj).toUpperCase()}`, { stateObj, inDialog });
   },
 });
diff --git a/src/state-summary/state-card-display.html b/src/state-summary/state-card-display.html
index 401ed8367..772d86862 100755
--- a/src/state-summary/state-card-display.html
+++ b/src/state-summary/state-card-display.html
@@ -6,17 +6,19 @@
   <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
   .state {
+    @apply(--paper-font-body1);
+    color: var(--primary-text-color);
+
     margin-left: 16px;
     text-transform: capitalize;
-    font-weight: 400;
     text-align: right;
-    line-height: 1.5;
+    line-height: 40px;
   }
   </style>
 
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <div class='state'>[[stateObj.stateDisplay]]</div>
     </div>
   </template>
diff --git a/src/state-summary/state-card-display.js b/src/state-summary/state-card-display.js
index 06d201c4f..1ad21227f 100644
--- a/src/state-summary/state-card-display.js
+++ b/src/state-summary/state-card-display.js
@@ -6,6 +6,11 @@ export default new Polymer({
   is: 'state-card-display',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
diff --git a/src/state-summary/state-card-input_select.html b/src/state-summary/state-card-input_select.html
index b149523f5..16133c283 100644
--- a/src/state-summary/state-card-input_select.html
+++ b/src/state-summary/state-card-input_select.html
@@ -13,7 +13,7 @@
 
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <paper-dropdown-menu no-label-float selected-item-label='{{selectedOption}}' on-tap='stopPropagation'>
         <paper-menu class="dropdown-content" selected="[[computeSelected(stateObj)]]">
           <template is='dom-repeat' items='[[stateObj.attributes.options]]'>
diff --git a/src/state-summary/state-card-input_select.js b/src/state-summary/state-card-input_select.js
index 3f1c446e6..d521dbb28 100644
--- a/src/state-summary/state-card-input_select.js
+++ b/src/state-summary/state-card-input_select.js
@@ -9,6 +9,11 @@ export default new Polymer({
   is: 'state-card-input_select',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
diff --git a/src/state-summary/state-card-input_slider.html b/src/state-summary/state-card-input_slider.html
index fa2bf7e57..44919804b 100644
--- a/src/state-summary/state-card-input_slider.html
+++ b/src/state-summary/state-card-input_slider.html
@@ -13,7 +13,7 @@
 
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <paper-slider min='[[min]]' max='[[max]]' value='{{value}}' step='[[step]]' pin on-change='selectedValueChanged'>
       </paper-slider>
     </div>
diff --git a/src/state-summary/state-card-input_slider.js b/src/state-summary/state-card-input_slider.js
index 902550d63..355de56af 100644
--- a/src/state-summary/state-card-input_slider.js
+++ b/src/state-summary/state-card-input_slider.js
@@ -9,6 +9,11 @@ export default new Polymer({
   is: 'state-card-input_slider',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
       observer: 'stateObjectChanged',
diff --git a/src/state-summary/state-card-media_player.html b/src/state-summary/state-card-media_player.html
index c674ad706..97e84f7fd 100644
--- a/src/state-summary/state-card-media_player.html
+++ b/src/state-summary/state-card-media_player.html
@@ -10,29 +10,26 @@
   }
 
   .state {
+    @apply(--paper-font-common-nowrap);
+    @apply(--paper-font-body1);
     margin-left: 16px;
     text-align: right;
-    overflow-x: hidden;
   }
 
   .main-text {
-    white-space: nowrap;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
+    @apply(--paper-font-common-nowrap);
+    color: var(--primary-text-color);
     text-transform: capitalize;
-    font-weight: 400;
   }
 
   .secondary-text {
-    white-space: nowrap;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
+    @apply(--paper-font-common-nowrap);
     color: var(--secondary-text-color);
   }
   </style>
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <div class='state'>
         <div class='main-text'>[[computePrimaryText(stateObj, isPlaying)]]</div>
         <div class='secondary-text'>[[computeSecondaryText(stateObj)]]</div>
diff --git a/src/state-summary/state-card-media_player.js b/src/state-summary/state-card-media_player.js
index cc5b07a90..703941b53 100644
--- a/src/state-summary/state-card-media_player.js
+++ b/src/state-summary/state-card-media_player.js
@@ -8,6 +8,11 @@ export default new Polymer({
   is: 'state-card-media_player',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
diff --git a/src/state-summary/state-card-rollershutter.html b/src/state-summary/state-card-rollershutter.html
index e5b8b9c00..5ef02c91d 100644
--- a/src/state-summary/state-card-rollershutter.html
+++ b/src/state-summary/state-card-rollershutter.html
@@ -19,7 +19,7 @@
   </style>
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <div class='state'>
         <paper-icon-button icon="mdi:arrow-up" on-tap='onMoveUpTap'
           disabled='[[computeIsFullyClosed(stateObj)]]'></paper-icon-button>
diff --git a/src/state-summary/state-card-rollershutter.js b/src/state-summary/state-card-rollershutter.js
index 11b2f23e7..032dc6c8b 100644
--- a/src/state-summary/state-card-rollershutter.js
+++ b/src/state-summary/state-card-rollershutter.js
@@ -10,6 +10,11 @@ export default new Polymer({
   is: 'state-card-rollershutter',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
diff --git a/src/state-summary/state-card-scene.html b/src/state-summary/state-card-scene.html
index 3a68333b5..e35052fe2 100644
--- a/src/state-summary/state-card-scene.html
+++ b/src/state-summary/state-card-scene.html
@@ -1,23 +1,23 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
 
 <link rel="import" href="../components/state-info.html">
 
 <dom-module id="state-card-scene">
   <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
-    paper-icon-button {
-      border: 1px solid;
-      border-radius: 50%;
+    paper-button {
       color: var(--default-primary-color);
-      line-height: 24px;
+      font-weight: 500;
+      top: 3px;
+      height: 37px;
     }
   </style>
 
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
-      <paper-icon-button on-tap='activateScene' icon='mdi:play'></paper-icon-button>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
+      <paper-button on-tap='activateScene'>ACTIVATE</paper-button>
     </div>
   </template>
 </dom-module>
diff --git a/src/state-summary/state-card-scene.js b/src/state-summary/state-card-scene.js
index d80a26d1a..5594c559b 100644
--- a/src/state-summary/state-card-scene.js
+++ b/src/state-summary/state-card-scene.js
@@ -9,12 +9,18 @@ export default new Polymer({
   is: 'state-card-scene',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
   },
 
-  activateScene() {
+  activateScene(ev) {
+    ev.stopPropagation();
     serviceActions.callTurnOn(this.stateObj.entityId);
   },
 });
diff --git a/src/state-summary/state-card-script.html b/src/state-summary/state-card-script.html
index f4ee4f054..9f78394b8 100644
--- a/src/state-summary/state-card-script.html
+++ b/src/state-summary/state-card-script.html
@@ -1,5 +1,5 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/paper-button/paper-button.html">
 
 <link rel="import" href="../components/state-info.html">
 <link rel="import" href="../components/entity/ha-entity-toggle.html">
@@ -7,22 +7,22 @@
 <dom-module id="state-card-script">
   <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
-    paper-icon-button {
-      border: 1px solid;
-      border-radius: 50%;
+    paper-button {
       color: var(--default-primary-color);
-      line-height: 24px;
+      font-weight: 500;
+      top: 3px;
+      height: 37px;
     }
   </style>
 
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <template is='dom-if' if='[[stateObj.attributes.can_cancel]]'>
         <ha-entity-toggle state-obj='[[stateObj]]'></ha-entity-toggle>
       </template>
       <template is='dom-if' if='[[!stateObj.attributes.can_cancel]]'>
-        <paper-icon-button on-tap='fireScript' icon='mdi:play'></paper-icon-button>
+        <paper-button on-tap='fireScript'>ACTIVATE</paper-button>
       </template>
     </div>
   </template>
diff --git a/src/state-summary/state-card-script.js b/src/state-summary/state-card-script.js
index ce1a9ec67..3c81b0308 100644
--- a/src/state-summary/state-card-script.js
+++ b/src/state-summary/state-card-script.js
@@ -10,12 +10,18 @@ export default new Polymer({
   is: 'state-card-script',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
   },
 
-  fireScript() {
+  fireScript(ev) {
+    ev.stopPropagation();
     serviceActions.callTurnOn(this.stateObj.entityId);
   },
 });
diff --git a/src/state-summary/state-card-thermostat.html b/src/state-summary/state-card-thermostat.html
index 5960f758c..d48180867 100644
--- a/src/state-summary/state-card-thermostat.html
+++ b/src/state-summary/state-card-thermostat.html
@@ -6,33 +6,26 @@
   <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
   :host {
+    @apply(--paper-font-body1);
     line-height: 1.5;
   }
 
   .state {
     margin-left: 16px;
     text-align: right;
-    overflow-x: hidden;
   }
 
   .target {
-    text-transform: capitalize;
-    font-weight: 400;
-    white-space: nowrap;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
+    color: var(--primary-text-color);
   }
 
   .current {
     color: var(--secondary-text-color);
-    white-space: nowrap;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
   }
   </style>
   <template>
     <div class='horizontal justified layout'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <div class='state'>
         <div class='target'>[[computeTargetTemperature(stateObj)]]</div>
 
diff --git a/src/state-summary/state-card-thermostat.js b/src/state-summary/state-card-thermostat.js
index 4b23b9c79..e103ab967 100644
--- a/src/state-summary/state-card-thermostat.js
+++ b/src/state-summary/state-card-thermostat.js
@@ -6,6 +6,11 @@ export default new Polymer({
   is: 'state-card-thermostat',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
diff --git a/src/state-summary/state-card-toggle.html b/src/state-summary/state-card-toggle.html
index 3aee26d14..364c8f79d 100755
--- a/src/state-summary/state-card-toggle.html
+++ b/src/state-summary/state-card-toggle.html
@@ -11,8 +11,8 @@
     }
   </style>
   <template>
-    <div class='horizontal justified layout center'>
-      <state-info state-obj="[[stateObj]]"></state-info>
+    <div class='horizontal justified layout'>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
       <ha-entity-toggle state-obj="[[stateObj]]"></ha-entity-toggle>
     </div>
 
diff --git a/src/state-summary/state-card-toggle.js b/src/state-summary/state-card-toggle.js
index 21fe460d6..67755870b 100644
--- a/src/state-summary/state-card-toggle.js
+++ b/src/state-summary/state-card-toggle.js
@@ -7,6 +7,11 @@ export default new Polymer({
   is: 'state-card-toggle',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
diff --git a/src/state-summary/state-card-weblink.html b/src/state-summary/state-card-weblink.html
index 9bdd616a4..662014b1b 100644
--- a/src/state-summary/state-card-weblink.html
+++ b/src/state-summary/state-card-weblink.html
@@ -4,22 +4,22 @@
 
 <dom-module id="state-card-weblink">
   <style>
-  state-badge {
-    float: left;
+  :host {
+    display: block;
   }
-
   .name {
-    margin-left: 56px;
+    @apply(--paper-font-common-nowrap);
+    @apply(--paper-font-body1);
+    color: var(--primary-color);
+
     text-transform: capitalize;
-    font-weight: 400;
-    text-overflow: ellipsis;
-    overflow-x: hidden;
     line-height: 40px;
+    margin-left: 16px;
   }
   </style>
 
   <template>
-    <state-badge state-obj='[[stateObj]]'></state-badge>
-    <div class='name'>[[stateObj.entityDisplay]]</div>
+    <state-badge state-obj='[[stateObj]]' in-dialog='[[inDialog]]'></state-badge>
+    <a href='[[stateObj.entityDisplay]]' target='_blank' class='name' id='link'>[[stateObj.entityDisplay]]</a>
   </template>
 </dom-module>
diff --git a/src/state-summary/state-card-weblink.js b/src/state-summary/state-card-weblink.js
index f7678444d..2ab87d95d 100644
--- a/src/state-summary/state-card-weblink.js
+++ b/src/state-summary/state-card-weblink.js
@@ -6,6 +6,11 @@ export default new Polymer({
   is: 'state-card-weblink',
 
   properties: {
+    detailed: {
+      type: Boolean,
+      value: false,
+    },
+
     stateObj: {
       type: Object,
     },
@@ -17,6 +22,10 @@ export default new Polymer({
 
   onTap(ev) {
     ev.stopPropagation();
+    if (ev.target === this.$.link) {
+      // Only open window if we clicked on card but not the link
+      return;
+    }
     window.open(this.stateObj.state, '_blank');
   },
 });
diff --git a/src/state-summary/state-card.html b/src/state-summary/state-card.html
deleted file mode 100644
index 523b9f222..000000000
--- a/src/state-summary/state-card.html
+++ /dev/null
@@ -1,29 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-
-<link rel="import" href="state-card-content.html">
-
-<dom-module id="state-card">
-  <style>
-    :host {
-      border-radius: 2px;
-      box-shadow: rgba(0, 0, 0, 0.098) 0px 2px 4px, rgba(0, 0, 0, 0.098) 0px 0px 3px;
-      transition: all 0.30s ease-out;
-
-      position: relative;
-      background-color: white;
-      padding: 16px;
-      width: 100%;
-
-      cursor: pointer;
-      overflow: hidden;
-
-      -ms-user-select: none;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-    }
-  </style>
-
-  <template>
-    <state-card-content state-obj="[[stateObj]]"></state-card-content>
-  </template>
-</dom-module>
diff --git a/src/state-summary/state-card.js b/src/state-summary/state-card.js
deleted file mode 100644
index 91cbe3427..000000000
--- a/src/state-summary/state-card.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import hass from '../util/home-assistant-js-instance';
-
-import Polymer from '../polymer';
-
-require('./state-card-content');
-
-const { moreInfoActions } = hass;
-
-export default new Polymer({
-  is: 'state-card',
-
-  properties: {
-    stateObj: {
-      type: Object,
-    },
-  },
-
-  listeners: {
-    tap: 'cardTapped',
-  },
-
-  cardTapped(ev) {
-    ev.stopPropagation();
-    this.async(() => moreInfoActions.selectEntity(this.stateObj.entityId), 1);
-  },
-});