diff --git a/gallery/src/components/demo-more-info.js b/gallery/src/components/demo-more-info.js
index 77e8161f6c..49605c3a16 100644
--- a/gallery/src/components/demo-more-info.js
+++ b/gallery/src/components/demo-more-info.js
@@ -9,30 +9,29 @@ class DemoMoreInfo extends PolymerElement {
   static get template() {
     return html`
       <style>
-        :host {
+        .root {
           display: flex;
-          align-items: start;
         }
-
+        #card {
+          max-width: 400px;
+          width: 100vw;
+        }
         ha-card {
-          width: 333px;
+          width: 352px;
           padding: 20px 24px;
         }
-
         state-card-content {
           display: block;
           margin-bottom: 16px;
         }
-
         pre {
           width: 400px;
           margin: 0 16px;
           overflow: auto;
           color: var(--primary-text-color);
         }
-
         @media only screen and (max-width: 800px) {
-          :host {
+          .root {
             flex-direction: column;
           }
           pre {
@@ -40,21 +39,25 @@ class DemoMoreInfo extends PolymerElement {
           }
         }
       </style>
-      <ha-card>
-        <state-card-content
-          state-obj="[[_stateObj]]"
-          hass="[[hass]]"
-          in-dialog
-        ></state-card-content>
+      <div class="root">
+        <div id="card">
+          <ha-card>
+            <state-card-content
+              state-obj="[[_stateObj]]"
+              hass="[[hass]]"
+              in-dialog
+            ></state-card-content>
 
-        <more-info-content
-          hass="[[hass]]"
-          state-obj="[[_stateObj]]"
-        ></more-info-content>
-      </ha-card>
-      <template is="dom-if" if="[[showConfig]]">
-        <pre>[[_jsonEntity(_stateObj)]]</pre>
-      </template>
+            <more-info-content
+              hass="[[hass]]"
+              state-obj="[[_stateObj]]"
+            ></more-info-content>
+          </ha-card>
+        </div>
+        <template is="dom-if" if="[[showConfig]]">
+          <pre>[[_jsonEntity(_stateObj)]]</pre>
+        </template>
+      </div>
     `;
   }
 
diff --git a/gallery/src/components/demo-more-infos.js b/gallery/src/components/demo-more-infos.js
index f1de5f0908..55b7e84777 100644
--- a/gallery/src/components/demo-more-infos.js
+++ b/gallery/src/components/demo-more-infos.js
@@ -3,12 +3,18 @@ import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "../../../src/components/ha-switch";
+import "../../../src/components/ha-formfield";
 import "./demo-more-info";
+import { applyThemesOnElement } from "../../../src/common/dom/apply_themes_on_element";
 
 class DemoMoreInfos extends PolymerElement {
   static get template() {
     return html`
       <style>
+        #container {
+          min-height: calc(100vh - 128px);
+          background: var(--primary-background-color);
+        }
         .cards {
           display: flex;
           flex-wrap: wrap;
@@ -23,20 +29,31 @@ class DemoMoreInfos extends PolymerElement {
         .filters {
           margin-left: 60px;
         }
+        ha-formfield {
+          margin-right: 16px;
+        }
       </style>
       <app-toolbar>
         <div class="filters">
-          <ha-switch checked="{{_showConfig}}">Show entity</ha-switch>
+          <ha-formfield label="Show entities">
+            <ha-switch checked="[[_showConfig]]" on-change="_showConfigToggled">
+            </ha-switch>
+          </ha-formfield>
+          <ha-formfield label="Dark theme">
+            <ha-switch on-change="_darkThemeToggled"> </ha-switch>
+          </ha-formfield>
         </div>
       </app-toolbar>
-      <div class="cards">
-        <template is="dom-repeat" items="[[entities]]">
-          <demo-more-info
-            entity-id="[[item]]"
-            show-config="[[_showConfig]]"
-            hass="[[hass]]"
-          ></demo-more-info>
-        </template>
+      <div id="container">
+        <div class="cards">
+          <template is="dom-repeat" items="[[entities]]">
+            <demo-more-info
+              entity-id="[[item]]"
+              show-config="[[_showConfig]]"
+              hass="[[hass]]"
+            ></demo-more-info>
+          </template>
+        </div>
       </div>
     `;
   }
@@ -51,6 +68,16 @@ class DemoMoreInfos extends PolymerElement {
       },
     };
   }
+
+  _showConfigToggled(ev) {
+    this._showConfig = ev.target.checked;
+  }
+
+  _darkThemeToggled(ev) {
+    applyThemesOnElement(this.$.container, { themes: {} }, "default", {
+      dark: ev.target.checked,
+    });
+  }
 }
 
 customElements.define("demo-more-infos", DemoMoreInfos);