diff --git a/src/panels/config/logs/error-log-card.ts b/src/panels/config/logs/error-log-card.ts
index 6963afb744..2a7f91fba2 100644
--- a/src/panels/config/logs/error-log-card.ts
+++ b/src/panels/config/logs/error-log-card.ts
@@ -21,6 +21,7 @@ import { fetchErrorLog } from "../../../data/error_log";
 import { extractApiErrorMessage } from "../../../data/hassio/common";
 import { fetchHassioLogs } from "../../../data/hassio/supervisor";
 import { HomeAssistant } from "../../../types";
+import { debounce } from "../../../common/util/debounce";
 
 @customElement("error-log-card")
 class ErrorLogCard extends LitElement {
@@ -76,6 +77,12 @@ class ErrorLogCard extends LitElement {
     `;
   }
 
+  private _debounceSearch = debounce(
+    () => (this._isLogLoaded ? this._refreshLogs() : this._debounceSearch()),
+    150,
+    false
+  );
+
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
 
@@ -93,11 +100,15 @@ class ErrorLogCard extends LitElement {
     }
 
     if (
-      (changedProps.has("filter") && this._isLogLoaded) ||
       (changedProps.has("show") && this.show) ||
       (changedProps.has("provider") && this.show)
     ) {
       this._refreshLogs();
+      return;
+    }
+
+    if (changedProps.has("filter")) {
+      this._debounceSearch();
     }
   }
 
@@ -116,6 +127,18 @@ class ErrorLogCard extends LitElement {
     if (isComponentLoaded(this.hass, "hassio")) {
       try {
         log = await fetchHassioLogs(this.hass, this.provider);
+        if (this.filter) {
+          log = log
+            .split("\n")
+            .filter((entry) =>
+              entry.toLowerCase().includes(this.filter.toLowerCase())
+            )
+            .join("\n");
+        }
+        if (!log) {
+          this._logHTML = this.hass.localize("ui.panel.config.logs.no_errors");
+          return;
+        }
         this._logHTML = html`<ha-ansi-to-html .content=${log}>
         </ha-ansi-to-html>`;
         this._isLogLoaded = true;
@@ -136,31 +159,33 @@ class ErrorLogCard extends LitElement {
 
     this._isLogLoaded = true;
 
-    this._logHTML = log
-      ? log
-          .split("\n")
-          .filter((entry) => {
-            if (this.filter) {
-              return entry.toLowerCase().includes(this.filter.toLowerCase());
-            }
-            return entry;
-          })
-          .map((entry) => {
-            if (entry.includes("INFO"))
-              return html`<div class="info">${entry}</div>`;
+    const split = log && log.split("\n");
 
-            if (entry.includes("WARNING"))
-              return html`<div class="warning">${entry}</div>`;
+    this._logHTML = split
+      ? (this.filter
+          ? split.filter((entry) => {
+              if (this.filter) {
+                return entry.toLowerCase().includes(this.filter.toLowerCase());
+              }
+              return entry;
+            })
+          : split
+        ).map((entry) => {
+          if (entry.includes("INFO"))
+            return html`<div class="info">${entry}</div>`;
 
-            if (
-              entry.includes("ERROR") ||
-              entry.includes("FATAL") ||
-              entry.includes("CRITICAL")
-            )
-              return html`<div class="error">${entry}</div>`;
+          if (entry.includes("WARNING"))
+            return html`<div class="warning">${entry}</div>`;
 
-            return html`<div>${entry}</div>`;
-          })
+          if (
+            entry.includes("ERROR") ||
+            entry.includes("FATAL") ||
+            entry.includes("CRITICAL")
+          )
+            return html`<div class="error">${entry}</div>`;
+
+          return html`<div>${entry}</div>`;
+        })
       : this.hass.localize("ui.panel.config.logs.no_errors");
   }