diff --git a/src/components/ha-demo-badge.html b/src/components/ha-demo-badge.html
new file mode 100644
index 0000000000..fdd6440691
--- /dev/null
+++ b/src/components/ha-demo-badge.html
@@ -0,0 +1,18 @@
+<link rel='import' href='../../bower_components/polymer/polymer.html'>
+
+<link rel='import' href='./ha-label-badge.html'>
+
+<dom-module id='ha-demo-badge'>
+  <style>
+    :host {
+      --ha-label-badge-color: #dac90d;
+    }
+  </style>
+  <template>
+    <ha-label-badge
+      icon='image:tag-faces'
+      label='Demo'
+      description=''
+    ></ha-label-badge>
+  </template>
+</dom-module>
diff --git a/src/components/ha-demo-badge.js b/src/components/ha-demo-badge.js
new file mode 100644
index 0000000000..6732f80e39
--- /dev/null
+++ b/src/components/ha-demo-badge.js
@@ -0,0 +1,7 @@
+import Polymer from '../polymer';
+
+require('./ha-label-badge');
+
+export default new Polymer({
+  is: 'ha-demo-badge',
+});
diff --git a/src/components/ha-label-badge.html b/src/components/ha-label-badge.html
index 3bf5da46f6..835cfd0a88 100644
--- a/src/components/ha-label-badge.html
+++ b/src/components/ha-label-badge.html
@@ -51,7 +51,7 @@
     color: white;
     border-radius: 1em;
     padding: 4px 8px;
-    font-weight: 400;
+    font-weight: 500;
     text-transform: uppercase;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/src/components/ha-zone-cards.html b/src/components/ha-zone-cards.html
index f2f0d8fbd7..74557f20fe 100644
--- a/src/components/ha-zone-cards.html
+++ b/src/components/ha-zone-cards.html
@@ -1,5 +1,6 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
+<link rel="import" href="./ha-demo-badge.html">
 <link rel="import" href="../cards/ha-badges-card.html">
 <link rel="import" href="../cards/ha-domain-card.html">
 <link rel="import" href="../cards/ha-introduction-card.html">
@@ -32,6 +33,10 @@
     <div class='main'>
       <template is='dom-if' if='[[cards._badges]]'>
         <div class='badges'>
+          <template is='dom-if' if='[[cards._demo]]'>
+            <ha-demo-badge></ha-demo-badge>
+          </template>
+
           <ha-badges-card states='[[cards._badges]]'></ha-badges-card>
         </div>
       </template>
@@ -40,9 +45,9 @@
       </template>
       <div class='horizontal layout'>
         <div class='column flex-1'>
-          <template is='dom-if' if='[[showIntroduction]]'>
+          <template is='dom-if' if='[[computeShowIntroduction(showIntroduction, cards)]]'>
             <div class='zone-card'>
-              <ha-introduction-card show-hide-instruction='[[computeShowHideInstruction(states)]]'></ha-introduction-card>
+              <ha-introduction-card show-hide-instruction='[[computeShowHideInstruction(states, cards)]]'></ha-introduction-card>
             </div>
           </template>
           <template is='dom-repeat' items='[[cards._columns.0]]'>
diff --git a/src/components/ha-zone-cards.js b/src/components/ha-zone-cards.js
index bd9f84c63a..5d22ca2618 100644
--- a/src/components/ha-zone-cards.js
+++ b/src/components/ha-zone-cards.js
@@ -1,6 +1,7 @@
 import Polymer from '../polymer';
 import { util } from '../util/home-assistant-js-instance';
 
+require('.//ha-demo-badge');
 require('../cards/ha-badges-card');
 require('../cards/ha-domain-card');
 require('../cards/ha-introduction-card');
@@ -113,8 +114,12 @@ export default new Polymer({
     return cards;
   },
 
-  computeShowHideInstruction(states) {
-    return states.size > 0 && !__DEMO__;
+  computeShowIntroduction(showIntroduction, cards) {
+    return showIntroduction || cards._demo;
+  },
+
+  computeShowHideInstruction(states, cards) {
+    return states.size > 0 && !__DEMO__ && !cards._demo;
   },
 
   computeStatesOfCard(cards, card) {