diff --git a/src/panels/developer-tools/logs/developer-tools-logs.ts b/src/panels/developer-tools/logs/developer-tools-logs.ts
index 6bc7190ffd..5f6a0a5c91 100644
--- a/src/panels/developer-tools/logs/developer-tools-logs.ts
+++ b/src/panels/developer-tools/logs/developer-tools-logs.ts
@@ -5,6 +5,8 @@ import {
   css,
   TemplateResult,
   property,
+  query,
+  customElement,
 } from "lit-element";
 
 import { HomeAssistant } from "../../../types";
@@ -12,10 +14,22 @@ import { haStyle } from "../../../resources/styles";
 
 import "../logs/system-log-card";
 import "../logs/error-log-card";
+// tslint:disable-next-line
+import { SystemLogCard } from "../logs/system-log-card";
 
-class HaPanelDevLogs extends LitElement {
+@customElement("developer-tools-logs")
+export class HaPanelDevLogs extends LitElement {
   @property() public hass!: HomeAssistant;
 
+  @query("system-log-card") private systemLog?: SystemLogCard;
+
+  public connectedCallback() {
+    super.connectedCallback();
+    if (this.systemLog && this.systemLog.loaded) {
+      this.systemLog.fetchData();
+    }
+  }
+
   protected render(): TemplateResult | void {
     return html`
       <div class="content">
@@ -48,5 +62,3 @@ declare global {
     "developer-tools-logs": HaPanelDevLogs;
   }
 }
-
-customElements.define("developer-tools-logs", HaPanelDevLogs);
diff --git a/src/panels/developer-tools/logs/system-log-card.ts b/src/panels/developer-tools/logs/system-log-card.ts
index 1d3e264e46..1406e26f3b 100644
--- a/src/panels/developer-tools/logs/system-log-card.ts
+++ b/src/panels/developer-tools/logs/system-log-card.ts
@@ -5,6 +5,7 @@ import {
   css,
   PropertyDeclarations,
   TemplateResult,
+  customElement,
 } from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "@polymer/paper-item/paper-item-body";
@@ -29,8 +30,10 @@ const formatLogTime = (date, language: string) => {
     : formatTime(dateTime, language);
 };
 
-class SystemLogCard extends LitElement {
+@customElement("system-log-card")
+export class SystemLogCard extends LitElement {
   public hass?: HomeAssistant;
+  public loaded = false;
   private _items?: LoggedError[];
 
   static get properties(): PropertyDeclarations {
@@ -40,6 +43,11 @@ class SystemLogCard extends LitElement {
     };
   }
 
+  public async fetchData(): Promise<void> {
+    this._items = undefined;
+    this._items = await fetchSystemLog(this.hass!);
+  }
+
   protected render(): TemplateResult | void {
     return html`
       <div class="system-log-intro">
@@ -91,7 +99,7 @@ class SystemLogCard extends LitElement {
                     service="clear"
                     >Clear</ha-call-service-button
                   >
-                  <ha-progress-button @click=${this._fetchData}
+                  <ha-progress-button @click=${this.fetchData}
                     >Refresh</ha-progress-button
                   >
                 </div>
@@ -103,7 +111,8 @@ class SystemLogCard extends LitElement {
 
   protected firstUpdated(changedProps): void {
     super.firstUpdated(changedProps);
-    this._fetchData();
+    this.fetchData();
+    this.loaded = true;
     this.addEventListener("hass-service-called", (ev) =>
       this.serviceCalled(ev)
     );
@@ -119,11 +128,6 @@ class SystemLogCard extends LitElement {
     }
   }
 
-  private async _fetchData(): Promise<void> {
-    this._items = undefined;
-    this._items = await fetchSystemLog(this.hass!);
-  }
-
   private _openLog(ev: Event): void {
     const item = (ev.currentTarget as any).logItem;
     showSystemLogDetailDialog(this, { item });
@@ -153,4 +157,8 @@ class SystemLogCard extends LitElement {
   }
 }
 
-customElements.define("system-log-card", SystemLogCard);
+declare global {
+  interface HTMLElementTagNameMap {
+    "system-log-card": SystemLogCard;
+  }
+}