diff --git a/.github/workflows/ReleaseActions.yml b/.github/workflows/ReleaseActions.yml
index 98669d34..cec63d62 100644
--- a/.github/workflows/ReleaseActions.yml
+++ b/.github/workflows/ReleaseActions.yml
@@ -14,8 +14,9 @@ jobs:
     name: Deploy to PyPi
     steps:
       - uses: actions/checkout@v2
-      - name: Checkout submodules
-        uses: textbook/git-checkout-submodule-action@master
+        with:
+          submodules: recursive
+
       - name: Set up Python
         uses: actions/setup-python@v2.2.2
         with:
diff --git a/.github/workflows/TestBuild.yml b/.github/workflows/TestBuild.yml
index ac97bffd..84af254e 100644
--- a/.github/workflows/TestBuild.yml
+++ b/.github/workflows/TestBuild.yml
@@ -18,8 +18,8 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-      - name: Checkout submodules
-        uses: textbook/git-checkout-submodule-action@master
+        with:
+          submodules: recursive
 
       - name: Set up Node ${{ env.NODE_VERSION }}
         uses: actions/setup-node@v2
diff --git a/src/components/dialogs/hacs-add-repository-dialog.ts b/src/components/dialogs/hacs-add-repository-dialog.ts
index ebe4d854..b2e20b9a 100644
--- a/src/components/dialogs/hacs-add-repository-dialog.ts
+++ b/src/components/dialogs/hacs-add-repository-dialog.ts
@@ -14,7 +14,8 @@ import "../../../homeassistant-frontend/src/components/ha-svg-icon";
 import { brandsUrl } from "../../../homeassistant-frontend/src/util/brands-url";
 import { Repository } from "../../data/common";
 import { activePanel } from "../../panels/hacs-sections";
-import { hacsIconStyle, scrollBarStyle, searchStyles } from "../../styles/element-styles";
+import { scrollBarStyle, searchStyles } from "../../styles/element-styles";
+import { HacsStyles } from "../../styles/hacs-common-style";
 import { filterRepositoriesByInput } from "../../tools/filter-repositories-by-input";
 import "../hacs-filter";
 import "./hacs-dialog";
@@ -109,6 +110,7 @@ export class HacsAddRepositoryDialog extends HacsDialogBase {
         hideActions
         scrimClickAction
         escapeKeyAction
+        maxWidth
       >
         <div class="searchandfilter" ?narrow=${this.narrow}>
           <search-input
@@ -229,7 +231,7 @@ export class HacsAddRepositoryDialog extends HacsDialogBase {
     return [
       searchStyles,
       scrollBarStyle,
-      hacsIconStyle,
+      HacsStyles,
       css`
         .content {
           width: 100%;
diff --git a/src/components/dialogs/hacs-custom-repositories-dialog.ts b/src/components/dialogs/hacs-custom-repositories-dialog.ts
index 107f3e2d..ff327c2f 100644
--- a/src/components/dialogs/hacs-custom-repositories-dialog.ts
+++ b/src/components/dialogs/hacs-custom-repositories-dialog.ts
@@ -4,13 +4,14 @@ import { css, html, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { computeRTL } from "../../../homeassistant-frontend/src/common/util/compute_rtl";
 import "../../../homeassistant-frontend/src/components/ha-alert";
+import "../../../homeassistant-frontend/src/components/ha-circular-progress";
 import "../../../homeassistant-frontend/src/components/ha-form/ha-form";
 import type { HaFormSchema } from "../../../homeassistant-frontend/src/components/ha-form/types";
-import "../../../homeassistant-frontend/src/components/ha-paper-dropdown-menu";
 import "../../../homeassistant-frontend/src/components/ha-settings-row";
 import "../../../homeassistant-frontend/src/components/ha-svg-icon";
 import { getRepositories, repositoryAdd, repositoryDelete } from "../../data/websocket";
-import { hacsIconStyle, scrollBarStyle } from "../../styles/element-styles";
+import { scrollBarStyle } from "../../styles/element-styles";
+import { HacsStyles } from "../../styles/hacs-common-style";
 import "./hacs-dialog";
 import { HacsDialogBase } from "./hacs-dialog-base";
 
@@ -18,6 +19,8 @@ import { HacsDialogBase } from "./hacs-dialog-base";
 export class HacsCustomRepositoriesDialog extends HacsDialogBase {
   @property() private _error: any;
 
+  @state() private _progress = false;
+
   @state() private _addRepositoryData = { category: undefined, repository: undefined };
 
   shouldUpdate(changedProperties: PropertyValues) {
@@ -26,6 +29,7 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
       changedProperties.has("active") ||
       changedProperties.has("_error") ||
       changedProperties.has("_addRepositoryData") ||
+      changedProperties.has("_progress") ||
       changedProperties.has("repositories")
     );
   }
@@ -105,7 +109,9 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
           this._addRepositoryData.repository === undefined}
           @click=${this._addRepository}
         >
-          ${this.hacs.localize("common.add")}
+          ${this._progress
+            ? html`<ha-circular-progress active size="small"></ha-circular-progress>`
+            : this.hacs.localize("common.add")}
         </mwc-button>
       </hacs-dialog>
     `;
@@ -121,6 +127,7 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
 
   private async _addRepository() {
     this._error = undefined;
+    this._progress = true;
     if (!this._addRepositoryData.category) {
       this._error = {
         message: this.hacs.localize("dialog_custom_repositories.no_category"),
@@ -139,6 +146,7 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
       this._addRepositoryData.category
     );
     this.repositories = await getRepositories(this.hass);
+    this._progress = false;
   }
 
   private async _removeRepository(repository: string) {
@@ -163,11 +171,10 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
   static get styles() {
     return [
       scrollBarStyle,
-      hacsIconStyle,
+      HacsStyles,
       css`
         .list {
           position: relative;
-          margin-top: -16px;
           max-height: 870px;
           overflow: auto;
         }
diff --git a/src/components/dialogs/hacs-dialog-base.ts b/src/components/dialogs/hacs-dialog-base.ts
index 099d7d32..bdcddfd2 100644
--- a/src/components/dialogs/hacs-dialog-base.ts
+++ b/src/components/dialogs/hacs-dialog-base.ts
@@ -13,18 +13,31 @@ import { Hacs } from "../../data/hacs";
 
 export class HacsDialogBase extends LitElement {
   @property({ attribute: false }) public configuration: Configuration;
+
   @property({ attribute: false }) public hacs: Hacs;
+
   @property({ attribute: false }) public critical!: Critical[];
+
   @property({ attribute: false }) public hass!: HomeAssistant;
+
   @property({ attribute: false }) public lovelace: LovelaceResource[];
+
   @property({ attribute: false }) public repositories: Repository[];
+
   @property({ attribute: false }) public route!: Route;
+
   @property({ attribute: false }) public status: Status;
+
   @property({ attribute: false }) public removed: RemovedRepository[];
-  @property({ type: Boolean }) public active: boolean = false;
-  @property({ type: Boolean }) public secondary: boolean = false;
-  @property({ type: Boolean }) public loading: boolean = true;
+
+  @property({ type: Boolean }) public active = false;
+
+  @property({ type: Boolean }) public secondary = false;
+
+  @property({ type: Boolean }) public loading = true;
+
   @property({ type: Boolean }) public narrow!: boolean;
+
   @property({ type: Boolean }) public sidebarDocked!: boolean;
 
   shouldUpdate(changedProperties: PropertyValues) {
@@ -44,6 +57,7 @@ export class HacsDialogBase extends LitElement {
       changedProperties.has("_updating")
     );
   }
+
   public connectedCallback() {
     super.connectedCallback();
     this.sidebarDocked = window.localStorage.getItem("dockedSidebar") === '"docked"';
diff --git a/src/components/dialogs/hacs-dialog.ts b/src/components/dialogs/hacs-dialog.ts
index 3169b17e..f4bb9643 100644
--- a/src/components/dialogs/hacs-dialog.ts
+++ b/src/components/dialogs/hacs-dialog.ts
@@ -1,9 +1,9 @@
-import { html, TemplateResult } from "lit";
+import { css, html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { createCloseHeading } from "../../../homeassistant-frontend/src/components/ha-dialog";
 import { HacsStyles } from "../../styles/hacs-common-style";
-import { hacsStyleDialog, scrollBarStyle } from "../../styles/element-styles";
 import { HacsDialogBase } from "./hacs-dialog-base";
+import { haStyleDialog } from "../../../homeassistant-frontend/src/resources/styles";
 
 @customElement("hacs-dialog")
 export class HacsDialog extends HacsDialogBase {
@@ -15,6 +15,8 @@ export class HacsDialog extends HacsDialogBase {
 
   @property({ type: Boolean }) public noClose = false;
 
+  @property({ type: Boolean }) public maxWidth = false;
+
   @property() public title!: string;
 
   protected render(): TemplateResult | void {
@@ -23,6 +25,7 @@ export class HacsDialog extends HacsDialogBase {
     }
 
     return html`<ha-dialog
+      ?maxWidth=${this.maxWidth}
       ?open=${this.active}
       ?scrimClickAction=${this.scrimClickAction}
       ?escapeKeyAction=${this.escapeKeyAction}
@@ -30,9 +33,7 @@ export class HacsDialog extends HacsDialogBase {
       ?hideActions=${this.hideActions}
       .heading=${!this.noClose ? createCloseHeading(this.hass, this.title) : this.title}
     >
-      <div class="content scroll" ?narrow=${this.narrow}>
-        <slot></slot>
-      </div>
+      <slot></slot>
       <slot class="primary" name="primaryaction" slot="primaryAction"></slot>
       <slot class="secondary" name="secondaryaction" slot="secondaryAction"></slot>
     </ha-dialog>`;
@@ -49,6 +50,14 @@ export class HacsDialog extends HacsDialogBase {
   }
 
   static get styles() {
-    return [hacsStyleDialog, scrollBarStyle, HacsStyles];
+    return [
+      haStyleDialog,
+      HacsStyles,
+      css`
+        ha-dialog[maxWidth] {
+          --mdc-dialog-max-width: calc(100vw - 32px);
+        }
+      `,
+    ];
   }
 }
diff --git a/src/components/dialogs/hacs-generic-dialog.ts b/src/components/dialogs/hacs-generic-dialog.ts
index ff8ff306..226635d9 100644
--- a/src/components/dialogs/hacs-generic-dialog.ts
+++ b/src/components/dialogs/hacs-generic-dialog.ts
@@ -9,9 +9,12 @@ import { HacsDialogBase } from "./hacs-dialog-base";
 
 @customElement("hacs-generic-dialog")
 export class HacsGenericDialog extends HacsDialogBase {
-  @property({ type: Boolean }) public markdown: boolean = false;
+  @property({ type: Boolean }) public markdown = false;
+
   @property() public repository?: string;
+
   @property() public header?: string;
+
   @property() public content?: string;
 
   private _getRepository = memoizeOne((repositories: Repository[], repository: string) =>
diff --git a/src/components/dialogs/hacs-install-dialog.ts b/src/components/dialogs/hacs-install-dialog.ts
index 0ff0a315..86469cb1 100644
--- a/src/components/dialogs/hacs-install-dialog.ts
+++ b/src/components/dialogs/hacs-install-dialog.ts
@@ -1,6 +1,3 @@
-import "@polymer/paper-item/paper-icon-item";
-import "@polymer/paper-item/paper-item-body";
-import "@polymer/paper-listbox/paper-listbox";
 import { css, CSSResultGroup, html, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -8,9 +5,8 @@ import { mainWindow } from "../../../homeassistant-frontend/src/common/dom/get_m
 import { computeRTL } from "../../../homeassistant-frontend/src/common/util/compute_rtl";
 import "../../../homeassistant-frontend/src/components/ha-alert";
 import "../../../homeassistant-frontend/src/components/ha-circular-progress";
-import "../../../homeassistant-frontend/src/components/ha-formfield";
-import "../../../homeassistant-frontend/src/components/ha-paper-dropdown-menu";
-import "../../../homeassistant-frontend/src/components/ha-switch";
+import "../../../homeassistant-frontend/src/components/ha-form/ha-form";
+import { HaFormSchema } from "../../../homeassistant-frontend/src/components/ha-form/types";
 import { showConfirmationDialog } from "../../../homeassistant-frontend/src/dialogs/generic/show-dialog-box";
 import { Repository } from "../../data/common";
 import {
@@ -20,6 +16,7 @@ import {
   repositoryToggleBeta,
   repositoryUpdate,
 } from "../../data/websocket";
+import { HacsStyles } from "../../styles/hacs-common-style";
 import { generateLovelaceURL } from "../../tools/added-to-lovelace";
 import { updateLovelaceResources } from "../../tools/update-lovelace-resources";
 import "../hacs-link";
@@ -30,15 +27,15 @@ import { HacsDialogBase } from "./hacs-dialog-base";
 export class HacsInstallDialog extends HacsDialogBase {
   @property() public repository?: string;
 
-  @property() public _repository?: Repository;
+  @state() private _toggle = true;
 
-  @property() private _toggle = true;
+  @state() private _installing = false;
 
-  @property() private _installing = false;
+  @state() private _error?: any;
 
-  @property() private _error?: any;
+  @state() public _repository?: Repository;
 
-  @state() private _version?: any;
+  @state() private _downloadRepositoryData = { beta: false, version: "" };
 
   shouldUpdate(changedProperties: PropertyValues) {
     changedProperties.forEach((_oldValue, propName) => {
@@ -46,7 +43,7 @@ export class HacsInstallDialog extends HacsDialogBase {
         this.sidebarDocked = window.localStorage.getItem("dockedSidebar") === '"docked"';
       }
       if (propName === "repositories") {
-        this._repository = this._getRepository(this.repositories, this.repository);
+        this._repository = this._getRepository(this.repositories, this.repository!);
       }
     });
     return (
@@ -55,8 +52,8 @@ export class HacsInstallDialog extends HacsDialogBase {
       changedProperties.has("active") ||
       changedProperties.has("_toggle") ||
       changedProperties.has("_error") ||
-      changedProperties.has("_version") ||
       changedProperties.has("_repository") ||
+      changedProperties.has("_downloadRepositoryData") ||
       changedProperties.has("_installing")
     );
   }
@@ -74,18 +71,44 @@ export class HacsInstallDialog extends HacsDialogBase {
   });
 
   protected async firstUpdated() {
-    this._repository = this._getRepository(this.repositories, this.repository);
-    if (!this._repository.updated_info) {
-      await repositoryUpdate(this.hass, this._repository.id);
+    this._repository = this._getRepository(this.repositories, this.repository!);
+    if (!this._repository?.updated_info) {
+      await repositoryUpdate(this.hass, this._repository!.id);
       this.repositories = await getRepositories(this.hass);
     }
     this._toggle = false;
     this.hass.connection.subscribeEvents((msg) => (this._error = (msg as any).data), "hacs/error");
+    this._downloadRepositoryData.beta = this._repository!.beta;
+    this._downloadRepositoryData.version =
+      this._repository?.version_or_commit === "version" ? this._repository.releases[0] : "";
   }
 
   protected render(): TemplateResult | void {
     if (!this.active || !this._repository) return html``;
     const installPath = this._getInstallPath(this._repository);
+
+    const donwloadRepositorySchema: HaFormSchema[] = [
+      {
+        type: "boolean",
+        name: "beta",
+      },
+      {
+        type: "select",
+        name: "version",
+        optional: true,
+        options:
+          this._repository.version_or_commit === "version"
+            ? this._repository.releases
+                .map((version) => [version, version])
+                .concat([
+                  this._repository.full_name === "hacs/integration" ||
+                  this._repository.hide_default_branch
+                    ? ["", ""]
+                    : [this._repository.default_branch, this._repository.default_branch],
+                ])
+            : [],
+      },
+    ];
     return html`
       <hacs-dialog
         .active=${this.active}
@@ -93,51 +116,23 @@ export class HacsInstallDialog extends HacsDialogBase {
         .hass=${this.hass}
         .secondary=${this.secondary}
         .title=${this._repository.name}
-        dynamicHeight
       >
         <div class="content">
           ${this._repository.version_or_commit === "version"
-            ? html`<div class="beta-container">
-                  <ha-formfield .label=${this.hacs.localize("dialog_install.show_beta")}>
-                    <ha-switch
-                      ?disabled=${this._toggle}
-                      .checked=${this._repository.beta}
-                      @change=${this._toggleBeta}
-                    ></ha-switch>
-                  </ha-formfield>
-                </div>
-                <div class="version-select-container">
-                  <ha-paper-dropdown-menu
-                    ?disabled=${this._toggle}
-                    class="version-select-dropdown"
-                    label="${this.hacs.localize("dialog_install.select_version")}"
-                  >
-                    <paper-listbox
-                      id="version"
-                      class="version-select-list"
-                      slot="dropdown-content"
-                      selected="0"
-                      @iron-select=${this._versionSelectChanged}
-                    >
-                      ${this._repository.releases.map(
-                        (release) =>
-                          html`<paper-item .version=${release} class="version-select-item"
-                            >${release}</paper-item
-                          >`
-                      )}
-                      ${this._repository.full_name === "hacs/integration" ||
-                      this._repository.hide_default_branch
-                        ? ""
-                        : html`
-                            <paper-item
-                              .version=${this._repository.default_branch}
-                              class="version-select-item"
-                              >${this._repository.default_branch}</paper-item
-                            >
-                          `}
-                    </paper-listbox>
-                  </ha-paper-dropdown-menu>
-                </div>`
+            ? html`
+                <ha-form
+                  .disabled=${this._toggle}
+                  ?narrow=${this.narrow}
+                  .data=${this._downloadRepositoryData}
+                  .schema=${donwloadRepositorySchema}
+                  .computeLabel=${(schema: HaFormSchema) =>
+                    schema.name === "beta"
+                      ? this.hacs.localize("dialog_install.show_beta")
+                      : this.hacs.localize("dialog_install.select_version")}
+                  @value-changed=${this._valueChanged}
+                >
+                </ha-form>
+              `
             : ""}
           ${!this._repository.can_install
             ? html`<ha-alert alert-type="error" .rtl=${computeRTL(this.hass)}>
@@ -171,8 +166,13 @@ export class HacsInstallDialog extends HacsDialogBase {
             : ""}
         </div>
         <mwc-button
+          raised
           slot="primaryaction"
-          ?disabled=${!this._repository.can_install || this._toggle}
+          ?disabled=${!this._repository.can_install ||
+          this._toggle ||
+          this._repository.version_or_commit === "version"
+            ? !this._downloadRepositoryData.version
+            : false}
           @click=${this._installRepository}
         >
           ${this._installing
@@ -186,18 +186,14 @@ export class HacsInstallDialog extends HacsDialogBase {
     `;
   }
 
-  private _versionSelectChanged(ev: CustomEvent): void {
-    const version = (ev.currentTarget as any).selectedItem.version;
-    if (version !== this._version) {
-      this._version = (ev.currentTarget as any).selectedItem.version;
+  private async _valueChanged(ev) {
+    if (this._downloadRepositoryData.beta !== ev.detail.value.beta) {
+      this._toggle = true;
+      await repositoryToggleBeta(this.hass, this.repository!);
+      this.repositories = await getRepositories(this.hass);
+      this._toggle = false;
     }
-  }
-
-  private async _toggleBeta(): Promise<void> {
-    this._toggle = true;
-    await repositoryToggleBeta(this.hass, this.repository);
-    this.repositories = await getRepositories(this.hass);
-    this._toggle = false;
+    this._downloadRepositoryData = ev.detail.value;
   }
 
   private async _installRepository(): Promise<void> {
@@ -205,9 +201,13 @@ export class HacsInstallDialog extends HacsDialogBase {
     if (!this._repository) {
       return;
     }
+
+    const selectedVersion =
+      this._downloadRepositoryData.version ||
+      this._repository.available_version ||
+      this._repository.default_branch;
+
     if (this._repository?.version_or_commit !== "commit") {
-      const selectedVersion =
-        this._version || this._repository.available_version || this._repository.default_branch;
       await repositoryInstallVersion(this.hass, this._repository.id, selectedVersion);
     } else {
       await repositoryInstall(this.hass, this._repository.id);
@@ -215,7 +215,7 @@ export class HacsInstallDialog extends HacsDialogBase {
     this.hacs.log.debug(this._repository.category, "_installRepository");
     this.hacs.log.debug(this.hacs.status.lovelace_mode, "_installRepository");
     if (this._repository.category === "plugin" && this.hacs.status.lovelace_mode === "storage") {
-      await updateLovelaceResources(this.hass, this._repository, this._version);
+      await updateLovelaceResources(this.hass, this._repository, selectedVersion);
     }
     this._installing = false;
 
@@ -250,30 +250,14 @@ export class HacsInstallDialog extends HacsDialogBase {
 
   static get styles(): CSSResultGroup {
     return [
+      HacsStyles,
       css`
-        .version-select-dropdown {
-          width: 100%;
-        }
-        .content {
-          padding: 32px 8px;
-        }
         .note {
-          margin-bottom: -32px;
           margin-top: 12px;
         }
         .lovelace {
           margin-top: 8px;
         }
-        paper-menu-button {
-          color: var(--secondary-text-color);
-          padding: 0;
-        }
-        paper-item {
-          cursor: pointer;
-        }
-        paper-item-body {
-          opacity: var(--dark-primary-opacity);
-        }
         pre {
           white-space: pre-line;
           user-select: all;
diff --git a/src/components/dialogs/hacs-navigate-dialog.ts b/src/components/dialogs/hacs-navigate-dialog.ts
index 5d17d571..8ebcf376 100644
--- a/src/components/dialogs/hacs-navigate-dialog.ts
+++ b/src/components/dialogs/hacs-navigate-dialog.ts
@@ -3,6 +3,7 @@ import "@material/mwc-linear-progress";
 import { css, html, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { navigate } from "../../../homeassistant-frontend/src/common/navigate";
+import { HacsStyles } from "../../styles/hacs-common-style";
 import "./hacs-dialog";
 import { HacsDialogBase } from "./hacs-dialog-base";
 
@@ -66,6 +67,7 @@ export class HacsNavigateDialog extends HacsDialogBase {
 
   static get styles() {
     return [
+      HacsStyles,
       css`
         hacs-dialog {
           --hacs-dialog-max-width: 460px;
diff --git a/src/components/dialogs/hacs-progress-dialog.ts b/src/components/dialogs/hacs-progress-dialog.ts
index 6c8a1206..11ceac45 100644
--- a/src/components/dialogs/hacs-progress-dialog.ts
+++ b/src/components/dialogs/hacs-progress-dialog.ts
@@ -1,3 +1,4 @@
+import "@material/mwc-button/mwc-button";
 import "../../../homeassistant-frontend/src/components/ha-circular-progress";
 import { html, TemplateResult, PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators";
@@ -14,7 +15,7 @@ export class HacsProgressDialog extends HacsDialogBase {
 
   @property() public confirm: () => Promise<void>;
 
-  @property({ type: Boolean }) private _inProgress: boolean = false;
+  @property({ type: Boolean }) private _inProgress = false;
 
   shouldUpdate(changedProperties: PropertyValues) {
     return (
diff --git a/src/components/dialogs/hacs-removed-dialog.ts b/src/components/dialogs/hacs-removed-dialog.ts
index 8256a9b3..4355cef1 100644
--- a/src/components/dialogs/hacs-removed-dialog.ts
+++ b/src/components/dialogs/hacs-removed-dialog.ts
@@ -2,13 +2,15 @@ import { css, html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { Repository } from "../../data/common";
 import { deleteResource, fetchResources, repositoryUninstall } from "../../data/websocket";
+import { HacsStyles } from "../../styles/hacs-common-style";
 import "./hacs-dialog";
 import { HacsDialogBase } from "./hacs-dialog-base";
 
 @customElement("hacs-removed-dialog")
 export class HacsRemovedDialog extends HacsDialogBase {
   @property({ attribute: false }) public repository: Repository;
-  @property({ type: Boolean }) private _updating: boolean = false;
+
+  @property({ type: Boolean }) private _updating = false;
 
   protected render(): TemplateResult | void {
     if (!this.active) return html``;
@@ -54,11 +56,14 @@ export class HacsRemovedDialog extends HacsDialogBase {
   }
 
   static get styles() {
-    return css`
-      .uninstall {
-        --mdc-theme-primary: var(--hcv-color-error);
-      }
-    `;
+    return [
+      HacsStyles,
+      css`
+        .uninstall {
+          --mdc-theme-primary: var(--hcv-color-error);
+        }
+      `,
+    ];
   }
 
   private _lovelaceUrl(): string {
@@ -83,6 +88,7 @@ export class HacsRemovedDialog extends HacsDialogBase {
     this._updating = false;
     this.active = false;
   }
+
   private async _ignoreMessage(): Promise<void> {
     this._updating = false;
     this.active = false;
diff --git a/src/components/dialogs/hacs-repository-info-dialog.ts b/src/components/dialogs/hacs-repository-info-dialog.ts
index e9403c75..4d1f2c82 100644
--- a/src/components/dialogs/hacs-repository-info-dialog.ts
+++ b/src/components/dialogs/hacs-repository-info-dialog.ts
@@ -7,11 +7,11 @@ import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { Repository } from "../../data/common";
 import { getRepositories, repositoryUpdate } from "../../data/websocket";
-import { scrollBarStyle } from "../../styles/element-styles";
 import { markdown } from "../../tools/markdown/markdown";
 import "../hacs-link";
 import "./hacs-dialog";
 import { HacsDialogBase } from "./hacs-dialog-base";
+import { HacsStyles } from "../../styles/hacs-common-style";
 
 @customElement("hacs-repository-info-dialog")
 export class HacsRepositoryDialog extends HacsDialogBase {
@@ -73,10 +73,12 @@ export class HacsRepositoryDialog extends HacsDialogBase {
         .active=${this.active}
         .title=${this._repository.name || ""}
         .hass=${this.hass}
+        maxWidth
       >
-        <div class="content scroll">
-          ${this._repository.updated_info
-            ? html` <div class="chips">
+        <div class="content">
+          ${!this.narrow
+            ? html`
+                <div class="chips">
                   ${this._repository.installed
                     ? html`
                         <ha-chip
@@ -115,10 +117,13 @@ export class HacsRepositoryDialog extends HacsDialogBase {
                     </ha-chip>
                   </hacs-link>
                 </div>
-                ${markdown.html(
-                  this._repository.additional_info || this.hacs.localize("dialog_info.no_info"),
-                  this._repository
-                )}`
+              `
+            : ""}
+          ${this._repository.updated_info
+            ? markdown.html(
+                this._repository.additional_info || this.hacs.localize("dialog_info.no_info"),
+                this._repository
+              )
             : html`
                 <div class="loading">
                   <ha-circular-progress active size="large"></ha-circular-progress>
@@ -144,13 +149,8 @@ export class HacsRepositoryDialog extends HacsDialogBase {
 
   static get styles() {
     return [
-      scrollBarStyle,
+      HacsStyles,
       css`
-        .content {
-          width: calc(100% - 12px);
-          max-height: 75vh;
-          padding-right: 12px;
-        }
         ha-chip {
           --ha-chip-icon-color: var(--hacs-chip-color, var(--primary-color));
         }
diff --git a/src/components/dialogs/hacs-update-dialog.ts b/src/components/dialogs/hacs-update-dialog.ts
index 5a8ef60a..83a3c5f7 100644
--- a/src/components/dialogs/hacs-update-dialog.ts
+++ b/src/components/dialogs/hacs-update-dialog.ts
@@ -18,6 +18,7 @@ import {
   repositoryReleasenotes,
 } from "../../data/websocket";
 import { scrollBarStyle } from "../../styles/element-styles";
+import { HacsStyles } from "../../styles/hacs-common-style";
 import { markdown } from "../../tools/markdown/markdown";
 import { updateLovelaceResources } from "../../tools/update-lovelace-resources";
 import "../hacs-link";
@@ -216,6 +217,7 @@ export class HacsUpdateDialog extends HacsDialogBase {
   static get styles(): CSSResultGroup {
     return [
       scrollBarStyle,
+      HacsStyles,
       css`
         .content {
           width: 360px;
diff --git a/src/components/hacs-repository-card.ts b/src/components/hacs-repository-card.ts
index 00e6ec40..b66bfd12 100644
--- a/src/components/hacs-repository-card.ts
+++ b/src/components/hacs-repository-card.ts
@@ -120,14 +120,9 @@ export class HacsRepositoryCard extends LitElement {
           ${this.repository.new && !this.repository.installed
             ? html`<div>
                   <mwc-button @click=${this._installRepository}>
-                    ${this.hacs.localize("common.install")}</mwc-button
+                    ${this.hacs.localize("common.download")}</mwc-button
                   >
                 </div>
-                <div>
-                  <mwc-button @click=${this._showReopsitoryInfo}>
-                    ${this.hacs.localize("repository_card.information")}
-                  </mwc-button>
-                </div>
                 <div>
                   <hacs-link .url="https://github.com/${this.repository.full_name}">
                     <mwc-button>${this.hacs.localize("common.repository")}</mwc-button>
diff --git a/src/styles/element-styles.ts b/src/styles/element-styles.ts
index 2b196895..f7122632 100644
--- a/src/styles/element-styles.ts
+++ b/src/styles/element-styles.ts
@@ -1,6 +1,4 @@
 import { css } from "lit";
-import { haStyleDialog } from "../../homeassistant-frontend/src/resources/styles";
-
 export const hacsLinkStyle = css`
   a {
     text-decoration: var(--hcv-text-decoration-link);
@@ -9,12 +7,20 @@ export const hacsLinkStyle = css`
 `;
 
 export const hacsIconStyle = css`
-  paper-menu-button,
   ha-svg-icon {
     color: var(--hcv-color-icon);
   }
 `;
 
+export const hacsButtonStyle = css`
+  mwc-button[raised] {
+    border-radius: 4px;
+  }
+  mwc-button[raised] > ha-circular-progress {
+    --mdc-theme-primary: var(--hcv-text-color-primary);
+  }
+`;
+
 export const hassTabsSubpage = css`
   hass-tabs-subpage {
     font-family: var(--paper-font-body1_-_font-family);
@@ -71,12 +77,3 @@ export const scrollBarStyle = css`
     scrollbar-width: thin;
   }
 `;
-
-export const hacsStyleDialog = [
-  haStyleDialog,
-  css`
-    .primary {
-      margin-left: 52px;
-    }
-  `,
-];
diff --git a/src/styles/hacs-common-style.ts b/src/styles/hacs-common-style.ts
index bd7be8a5..cd5c8e5b 100644
--- a/src/styles/hacs-common-style.ts
+++ b/src/styles/hacs-common-style.ts
@@ -1,5 +1,5 @@
 import { css, CSSResultGroup } from "lit";
-import { hacsIconStyle, hacsLinkStyle } from "./element-styles";
+import { hacsButtonStyle, hacsIconStyle, hacsLinkStyle } from "./element-styles";
 import { haStyle } from "../../homeassistant-frontend/src/resources/styles";
 
 export const hacsCommonClasses = css`
@@ -27,4 +27,5 @@ export const HacsStyles: CSSResultGroup = [
   hacsIconStyle,
   hacsCommonClasses,
   hacsLinkStyle,
+  hacsButtonStyle,
 ];