diff --git a/src/components/dialogs/hacs-add-repository-dialog.ts b/src/components/dialogs/hacs-add-repository-dialog.ts
index 6da7d1ea..0666dde8 100644
--- a/src/components/dialogs/hacs-add-repository-dialog.ts
+++ b/src/components/dialogs/hacs-add-repository-dialog.ts
@@ -110,6 +110,7 @@ export class HacsAddRepositoryDialog extends HacsDialogBase {
       >
         <div class="searchandfilter">
           <search-input
+            .hass=${this.hass}
             no-label-float
             .label=${this.hacs.localize("search.placeholder")}
             .filter=${this._searchInput || ""}
@@ -347,6 +348,7 @@ export class HacsAddRepositoryDialog extends HacsDialogBase {
 
         hacs-filter {
           width: 100%;
+          margin-left: -32px;
         }
         div[secondary] {
           width: 88%;
diff --git a/src/components/hacs-checkbox.ts b/src/components/hacs-checkbox.ts
deleted file mode 100644
index 81de324a..00000000
--- a/src/components/hacs-checkbox.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators";
-import { classMap, ClassInfo } from "lit/directives/class-map";
-import { HacsStyles } from "../styles/hacs-common-style";
-
-@customElement("hacs-checkbox")
-export class HacsCheckbox extends LitElement {
-  @property({ attribute: false }) public checked: boolean;
-  @property({ attribute: false }) public label: string;
-  @property({ attribute: false }) public id: string;
-
-  private get _checkboxClass(): ClassInfo {
-    return {
-      checkbox: true,
-      checked: this.checked,
-    };
-  }
-
-  protected render(): TemplateResult | void {
-    return html`
-      <div class="checkbox-container">
-        <div class=${classMap(this._checkboxClass)} @click=${this._checkboxClicked}>
-          <div class="value">${this.checked ? "✔" : ""}</div>
-        </div>
-        <div class="label" @click=${this._checkboxClicked}>${this.label}</div>
-      </div>
-    `;
-  }
-
-  private _checkboxClicked() {
-    this.checked = !this.checked;
-    this.dispatchEvent(
-      new CustomEvent("checkbox-change", {
-        detail: {
-          id: this.id,
-        },
-        bubbles: true,
-        composed: true,
-      })
-    );
-  }
-
-  static get styles(): CSSResultGroup {
-    return [
-      HacsStyles,
-      css`
-        .checkbox-container {
-          display: flex;
-          color: var(--hcv-text-color-primary);
-          -webkit-user-select: none;
-          -moz-user-select: none;
-          -ms-user-select: none;
-          user-select: none;
-        }
-
-        .label {
-          line-height: 18px;
-          opacity: var(--dark-primary-opacity);
-          font-family: var(--paper-font-subhead_-_font-family);
-          -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing);
-          font-size: var(--paper-font-subhead_-_font-size);
-          cursor: pointer;
-        }
-
-        .value {
-          margin-left: 2px;
-          color: var(--hcv-text-color-on-background);
-        }
-
-        .checkbox {
-          cursor: pointer;
-          height: 16px;
-          width: 16px;
-          font-size: 14px;
-          margin-right: 8px;
-          background-color: var(--primary-background-color);
-          border: 1px solid var(--divider-color);
-          border-radius: 4px;
-          line-height: 16px;
-        }
-
-        .checkbox.checked {
-          border-color: var(--accent-color);
-          background-color: var(--accent-color);
-        }
-      `,
-    ];
-  }
-}
diff --git a/src/components/hacs-filter.ts b/src/components/hacs-filter.ts
index 5474276b..afc89bac 100644
--- a/src/components/hacs-filter.ts
+++ b/src/components/hacs-filter.ts
@@ -1,38 +1,41 @@
+import "../../homeassistant-frontend/src/components/ha-checkbox";
+import "../../homeassistant-frontend/src/components/ha-formfield";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { Filter } from "../data/common";
 import { Hacs } from "../data/hacs";
 import { HacsStyles } from "../styles/hacs-common-style";
-import "./hacs-checkbox";
 
 @customElement("hacs-filter")
 export class HacsFilter extends LitElement {
-  @property({ attribute: false }) public filters: Filter[];
-  @property({ attribute: false }) public hacs: Hacs;
+  @property({ attribute: false }) public filters?: Filter[];
 
-  protected async firstUpdated() {
-    this.addEventListener("checkbox-change", (e) => this._filterClick(e));
-  }
+  @property({ attribute: false }) public hacs!: Hacs;
 
   protected render(): TemplateResult | void {
     return html`
       <div class="filter">
         ${this.filters?.map(
           (filter) => html`
-            <hacs-checkbox
+            <ha-formfield
               class="checkbox"
               .label=${this.hacs.localize(`common.${filter.id}`) || filter.value}
-              .id=${filter.id}
-              .checked=${filter.checked || false}
-            />
-            </hacs-checkbox>`
+            >
+              <ha-checkbox
+                .checked=${filter.checked || false}
+                .id=${filter.id}
+                @click=${this._filterClick}
+              >
+              </ha-checkbox>
+            </ha-formfield>
+          `
         )}
       </div>
     `;
   }
 
   private _filterClick(ev): void {
-    const filter = ev.detail;
+    const filter = ev.currentTarget;
     this.dispatchEvent(
       new CustomEvent("filter-change", {
         detail: {
diff --git a/src/panels/hacs-store-panel.ts b/src/panels/hacs-store-panel.ts
index 6406f917..81d1923a 100644
--- a/src/panels/hacs-store-panel.ts
+++ b/src/panels/hacs-store-panel.ts
@@ -183,6 +183,7 @@ export class HacsStorePanel extends LitElement {
             <div slot="header">
               <slot name="header">
                 <search-input
+                  .hass=${this.hass}
                   class="header"
                   no-label-float
                   .label=${this.hacs.localize("search.installed")}
@@ -194,6 +195,7 @@ export class HacsStorePanel extends LitElement {
           `
         : html`<div class="search">
             <search-input
+              .hass=${this.hass}
               no-label-float
               .label=${newRepositories.length === 0
                 ? this.hacs.localize("search.installed")