diff --git a/src/dialogs/config-flow/dialog-data-entry-flow.ts b/src/dialogs/config-flow/dialog-data-entry-flow.ts
index d03e2aa4a9..be9bf9d761 100644
--- a/src/dialogs/config-flow/dialog-data-entry-flow.ts
+++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts
@@ -6,8 +6,7 @@ import { customElement, property, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import type { HASSDomEvent } from "../../common/dom/fire_event";
 import { fireEvent } from "../../common/dom/fire_event";
-import "../../components/ha-dialog";
-import "../../components/ha-dialog-header";
+import "../../components/ha-wa-dialog";
 import "../../components/ha-icon-button";
 import type { DataEntryFlowStep } from "../../data/data_entry_flow";
 import {
@@ -64,6 +63,8 @@ class DataEntryFlowDialog extends LitElement {
 
   private _instance = instance;
 
+  @state() private _open = false;
+
   @state() private _step:
     | DataEntryFlowStep
     | undefined
@@ -77,6 +78,7 @@ class DataEntryFlowDialog extends LitElement {
   public async showDialog(params: DataEntryFlowDialogParams): Promise<void> {
     this._params = params;
     this._instance = instance++;
+    this._open = true;
 
     const curInstance = this._instance;
     let step: DataEntryFlowStep;
@@ -146,6 +148,17 @@ class DataEntryFlowDialog extends LitElement {
   }
 
   public closeDialog() {
+    if (!this._params) {
+      return;
+    }
+    if (!this._open) {
+      this._dialogClosed();
+      return;
+    }
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     if (!this._params) {
       return;
     }
@@ -174,6 +187,7 @@ class DataEntryFlowDialog extends LitElement {
       this._unsubDataEntryFlowProgress();
       this._unsubDataEntryFlowProgress = undefined;
     }
+    this._open = false;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
 
@@ -289,56 +303,53 @@ class DataEntryFlowDialog extends LitElement {
     const dialogSubtitle = this._getDialogSubtitle();
 
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        scrimClickAction
-        escapeKeyAction
-        hideActions
-        .heading=${dialogTitle || true}
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        prevent-scrim-close
+        @after-show=${this._focusFormStep}
+        @closed=${this._dialogClosed}
       >
-        <ha-dialog-header slot="heading">
-          <ha-icon-button
-            .label=${this.hass.localize("ui.common.close")}
-            .path=${mdiClose}
-            dialogAction="close"
-            slot="navigationIcon"
-          ></ha-icon-button>
+        <ha-icon-button
+          slot="headerNavigationIcon"
+          .label=${this.hass.localize("ui.common.close")}
+          .path=${mdiClose}
+          data-dialog="close"
+        ></ha-icon-button>
 
-          <div
-            slot="title"
-            class="dialog-title${this._step?.type === "form" ? " form" : ""}"
-            title=${dialogTitle}
-          >
-            ${dialogTitle}
-          </div>
+        <div
+          slot="headerTitle"
+          class="dialog-title${this._step?.type === "form" ? " form" : ""}"
+          title=${dialogTitle}
+        >
+          ${dialogTitle}
+        </div>
 
-          ${dialogSubtitle
-            ? html` <div slot="subtitle">${dialogSubtitle}</div>`
-            : nothing}
-          ${showDocumentationLink && !this._loading && this._step
-            ? html`
-                <a
-                  slot="actionItems"
-                  class="help"
-                  href=${this._params.manifest!.is_built_in
-                    ? documentationUrl(
-                        this.hass,
-                        `/integrations/${this._params.manifest!.domain}`
-                      )
-                    : this._params.manifest!.documentation}
-                  target="_blank"
-                  rel="noreferrer noopener"
+        ${dialogSubtitle
+          ? html` <div slot="headerSubtitle">${dialogSubtitle}</div>`
+          : nothing}
+        ${showDocumentationLink && !this._loading && this._step
+          ? html`
+              <a
+                slot="headerActionItems"
+                class="help"
+                href=${this._params.manifest!.is_built_in
+                  ? documentationUrl(
+                      this.hass,
+                      `/integrations/${this._params.manifest!.domain}`
+                    )
+                  : this._params.manifest!.documentation}
+                target="_blank"
+                rel="noreferrer noopener"
+              >
+                <ha-icon-button
+                  .label=${this.hass.localize("ui.common.help")}
+                  .path=${mdiHelpCircle}
                 >
-                  <ha-icon-button
-                    .label=${this.hass.localize("ui.common.help")}
-                    .path=${mdiHelpCircle}
-                  >
-                  </ha-icon-button
-                ></a>
-              `
-            : nothing}
-        </ha-dialog-header>
+                </ha-icon-button
+              ></a>
+            `
+          : nothing}
         <div>
           ${this._loading || this._step === null
             ? html`
@@ -358,6 +369,7 @@ class DataEntryFlowDialog extends LitElement {
                   ${this._step.type === "form"
                     ? html`
                         <step-flow-form
+                          autofocus
                           narrow
                           .flowConfig=${this._params.flowConfig}
                           .step=${this._step}
@@ -417,7 +429,7 @@ class DataEntryFlowDialog extends LitElement {
                               `}
                 `}
         </div>
-      </ha-dialog>
+      </ha-wa-dialog>
     `;
   }
 
@@ -547,11 +559,24 @@ class DataEntryFlowDialog extends LitElement {
     };
   }
 
+  private _focusFormStep = async (): Promise<void> => {
+    if (this._step?.type !== "form" || !this._open) {
+      return;
+    }
+
+    await this.updateComplete;
+    (
+      this.renderRoot.querySelector(
+        "step-flow-form[autofocus]"
+      ) as HTMLElement | null
+    )?.focus();
+  };
+
   static get styles(): CSSResultGroup {
     return [
       haStyleDialog,
       css`
-        ha-dialog {
+        ha-wa-dialog {
           --dialog-content-padding: 0;
         }
         .dialog-title {
diff --git a/src/dialogs/config-flow/step-flow-form.ts b/src/dialogs/config-flow/step-flow-form.ts
index 4692764fe5..85f5998acf 100644
--- a/src/dialogs/config-flow/step-flow-form.ts
+++ b/src/dialogs/config-flow/step-flow-form.ts
@@ -29,6 +29,8 @@ class StepFlowForm extends LitElement {
 
   @property({ type: Boolean }) public narrow = false;
 
+  @property({ type: Boolean, attribute: "autofocus" }) public autoFocus = false;
+
   @property({ attribute: false }) public step!: DataEntryFlowStepForm;
 
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -45,6 +47,11 @@ class StepFlowForm extends LitElement {
 
   private _errors?: Record<string, string>;
 
+  static shadowRootOptions: ShadowRootInit = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
   public disconnectedCallback(): void {
     super.disconnectedCallback();
     this.removeEventListener("keydown", this._handleKeyDown);
@@ -83,6 +90,7 @@ class StepFlowForm extends LitElement {
           ? html`<ha-alert alert-type="error">${this._errorMsg}</ha-alert>`
           : ""}
         <ha-form
+          ?autofocus=${this.autoFocus}
           .hass=${this.hass}
           .narrow=${this.narrow}
           .data=${stepData}
@@ -133,10 +141,13 @@ class StepFlowForm extends LitElement {
 
   protected firstUpdated(changedProps: PropertyValues) {
     super.firstUpdated(changedProps);
-    setTimeout(() => this.shadowRoot!.querySelector("ha-form")!.focus(), 0);
     this.addEventListener("keydown", this._handleKeyDown);
   }
 
+  public override focus(_options?: FocusOptions): void {
+    this.renderRoot.querySelector("ha-form")?.focus();
+  }
+
   protected willUpdate(changedProps: PropertyValues): void {
     super.willUpdate(changedProps);
     if (changedProps.has("step") && this.step?.preview) {
diff --git a/src/panels/config/integrations/dialog-add-integration.ts b/src/panels/config/integrations/dialog-add-integration.ts
index 0351c34af8..62981bea38 100644
--- a/src/panels/config/integrations/dialog-add-integration.ts
+++ b/src/panels/config/integrations/dialog-add-integration.ts
@@ -1,11 +1,9 @@
-import { mdiClose } from "@mdi/js";
 import type { IFuseOptions } from "fuse.js";
 import Fuse from "fuse.js";
 import type { HassConfig } from "home-assistant-js-websocket";
 import type { PropertyValues, TemplateResult } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, state } from "lit/decorators";
-import { ifDefined } from "lit/directives/if-defined";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
@@ -17,10 +15,10 @@ import {
 import { navigate } from "../../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
 import type { LocalizeFunc } from "../../../common/translations/localize";
-import { createCloseHeading } from "../../../components/ha-dialog";
 import "../../../components/ha-icon-button-prev";
 import "../../../components/ha-list";
 import "../../../components/ha-spinner";
+import "../../../components/ha-wa-dialog";
 import "../../../components/search-input";
 import { getConfigEntries } from "../../../data/config_entries";
 import {
@@ -145,6 +143,10 @@ class AddIntegrationDialog extends LitElement {
 
   public closeDialog() {
     this._open = false;
+  }
+
+  private _dialogClosed() {
+    this._open = false;
     this._integrations = undefined;
     this._helpers = undefined;
     this._pickedBrand = undefined;
@@ -361,7 +363,7 @@ class AddIntegrationDialog extends LitElement {
   }
 
   protected render() {
-    if (!this._open) {
+    if (!this._open && !this._integrations && !this._helpers) {
       return nothing;
     }
     const integrations = this._integrations
@@ -373,20 +375,38 @@ class AddIntegrationDialog extends LitElement {
         findIntegration(this._integrations, this._pickedBrand)
       : undefined;
 
-    return html`<ha-dialog
-      open
-      @closed=${this.closeDialog}
-      hideActions
-      .heading=${createCloseHeading(
-        this.hass,
-        this.hass.localize("ui.panel.config.integrations.new")
-      )}
+    const showingBrandView =
+      (this._pickedBrand && (!this._integrations || pickedIntegration)) ||
+      this._showDiscovered;
+
+    const flowsInProgress = showingBrandView
+      ? this._getFlowsForCurrentView(pickedIntegration)
+      : [];
+
+    const headerTitle = showingBrandView
+      ? this._getBrandHeading(pickedIntegration, flowsInProgress)
+      : this.hass.localize("ui.panel.config.integrations.new");
+
+    return html`<ha-wa-dialog
+      .hass=${this.hass}
+      .open=${this._open}
+      header-title=${headerTitle}
+      @closed=${this._dialogClosed}
     >
-      ${(this._pickedBrand && (!this._integrations || pickedIntegration)) ||
-      this._showDiscovered
-        ? this._renderBrandView(pickedIntegration)
+      ${showingBrandView
+        ? html`
+            ${!this._openedDirectly
+              ? html`
+                  <ha-icon-button-prev
+                    slot="headerNavigationIcon"
+                    @click=${this._prevClicked}
+                  ></ha-icon-button-prev>
+                `
+              : nothing}
+            ${this._renderBrandView(pickedIntegration, flowsInProgress)}
+          `
         : this._renderAll(integrations)}
-    </ha-dialog>`;
+    </ha-wa-dialog>`;
   }
 
   private _getFlowsForCurrentView(
@@ -413,61 +433,53 @@ class AddIntegrationDialog extends LitElement {
     return this._getFlowsInProgressForDomains(domains);
   }
 
-  private _renderBrandView(
-    integration: Brand | Integration | undefined
-  ): TemplateResult {
-    const flowsInProgress = this._getFlowsForCurrentView(integration);
-
-    let heading: string;
+  private _getBrandHeading(
+    integration: Brand | Integration | undefined,
+    flowsInProgress: DataEntryFlowProgress[]
+  ): string {
     if (
       integration?.iot_standards &&
       !("integrations" in integration) &&
       !flowsInProgress.length
     ) {
-      heading = this.hass.localize(
+      return this.hass.localize(
         "ui.panel.config.integrations.what_device_type"
       );
-    } else if (
+    }
+
+    if (
       integration &&
       !integration?.iot_standards &&
       !("integrations" in integration) &&
       flowsInProgress.length
     ) {
-      heading = this.hass.localize(
+      return this.hass.localize(
         "ui.panel.config.integrations.confirm_add_discovered"
       );
-    } else {
-      heading = this.hass.localize("ui.panel.config.integrations.what_to_add");
     }
 
-    return html`<div slot="heading">
-        ${this._openedDirectly
-          ? html`<ha-icon-button
-              class="header-close-button"
-              .label=${this.hass.localize("ui.common.close")}
-              .path=${mdiClose}
-              dialogAction="close"
-            ></ha-icon-button>`
-          : html`<ha-icon-button-prev
-              @click=${this._prevClicked}
-            ></ha-icon-button-prev>`}
-        <h2 class="mdc-dialog__title">${heading}</h2>
-      </div>
-      <ha-domain-integrations
-        .hass=${this.hass}
-        .domain=${this._pickedBrand}
-        .integration=${integration}
-        .flowsInProgress=${flowsInProgress}
-        .navigateToResult=${this._navigateToResult}
-        .showManageLink=${this._showDiscovered}
-        style=${styleMap({
-          minWidth: `${this._width}px`,
-          minHeight: `581px`,
-        })}
-        @close-dialog=${this.closeDialog}
-        @supported-by=${this._handleSupportedByEvent}
-        @select-brand=${this._handleSelectBrandEvent}
-      ></ha-domain-integrations>`;
+    return this.hass.localize("ui.panel.config.integrations.what_to_add");
+  }
+
+  private _renderBrandView(
+    integration: Brand | Integration | undefined,
+    flowsInProgress: DataEntryFlowProgress[]
+  ): TemplateResult {
+    return html`<ha-domain-integrations
+      .hass=${this.hass}
+      .domain=${this._pickedBrand}
+      .integration=${integration}
+      .flowsInProgress=${flowsInProgress}
+      .navigateToResult=${this._navigateToResult}
+      .showManageLink=${this._showDiscovered}
+      style=${styleMap({
+        minWidth: `${this._width}px`,
+        minHeight: `581px`,
+      })}
+      @close-dialog=${this.closeDialog}
+      @supported-by=${this._handleSupportedByEvent}
+      @select-brand=${this._handleSelectBrandEvent}
+    ></ha-domain-integrations>`;
   }
 
   private _handleSelectBrandEvent(ev: CustomEvent) {
@@ -524,7 +536,7 @@ class AddIntegrationDialog extends LitElement {
   private _renderAll(integrations?: IntegrationListItem[]): TemplateResult {
     return html`<search-input
         .hass=${this.hass}
-        dialogInitialFocus=${ifDefined(this._narrow ? undefined : "")}
+        ?autofocus=${!this._narrow}
         .filter=${this._filter}
         @value-changed=${this._filterChanged}
         .label=${this.hass.localize(
@@ -533,9 +545,7 @@ class AddIntegrationDialog extends LitElement {
         @keypress=${this._maybeSubmit}
       ></search-input>
       ${integrations
-        ? html`<ha-list
-            dialogInitialFocus=${ifDefined(this._narrow ? "" : undefined)}
-          >
+        ? html`<ha-list ?autofocus=${this._narrow}>
             <lit-virtualizer
               scroller
               tabindex="-1"
@@ -809,25 +819,16 @@ class AddIntegrationDialog extends LitElement {
     haStyleScrollbar,
     haStyleDialog,
     css`
-      @media all and (min-width: 550px) {
-        ha-dialog {
-          --mdc-dialog-min-width: 500px;
-        }
-      }
-      ha-dialog {
+      ha-wa-dialog {
         --dialog-content-padding: 0;
       }
       search-input {
         display: block;
-        margin: 16px 16px 0;
+        margin: 0 16px;
       }
       .divider {
         border-bottom-color: var(--divider-color);
       }
-      h2 {
-        padding-inline-end: 66px;
-        direction: var(--direction);
-      }
       p {
         text-align: center;
         padding: 16px;
@@ -853,43 +854,6 @@ class AddIntegrationDialog extends LitElement {
       ha-integration-list-item {
         width: 100%;
       }
-      ha-icon-button-prev,
-      .header-close-button {
-        color: var(--secondary-text-color);
-        position: absolute;
-        left: 16px;
-        top: 14px;
-        inset-inline-end: initial;
-        inset-inline-start: 16px;
-        direction: var(--direction);
-      }
-      .mdc-dialog__title {
-        margin: 0;
-        margin-bottom: 8px;
-        margin-left: 48px;
-        margin-inline-start: 48px;
-        margin-inline-end: initial;
-        padding: 24px 24px 0 24px;
-        color: var(--mdc-dialog-heading-ink-color, rgba(0, 0, 0, 0.87));
-        font-size: var(
-          --mdc-typography-headline6-font-size,
-          var(--ha-font-size-l)
-        );
-        line-height: var(--mdc-typography-headline6-line-height, 2rem);
-        font-weight: var(
-          --mdc-typography-headline6-font-weight,
-          var(--ha-font-weight-medium)
-        );
-        letter-spacing: var(
-          --mdc-typography-headline6-letter-spacing,
-          0.0125em
-        );
-        text-decoration: var(
-          --mdc-typography-headline6-text-decoration,
-          inherit
-        );
-        text-transform: var(--mdc-typography-headline6-text-transform, inherit);
-      }
     `,
   ];
 }
diff --git a/src/panels/config/integrations/dialog-yaml-integration.ts b/src/panels/config/integrations/dialog-yaml-integration.ts
index a1e869ce22..95427a00f3 100644
--- a/src/panels/config/integrations/dialog-yaml-integration.ts
+++ b/src/panels/config/integrations/dialog-yaml-integration.ts
@@ -1,11 +1,14 @@
+import { mdiOpenInNew } from "@mdi/js";
 import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../common/dom/fire_event";
 import type { HomeAssistant } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import type { YamlIntegrationDialogParams } from "./show-add-integration-dialog";
-import "../../../components/ha-dialog";
 import "../../../components/ha-button";
+import "../../../components/ha-dialog-footer";
+import "../../../components/ha-svg-icon";
+import "../../../components/ha-wa-dialog";
 
 @customElement("dialog-yaml-integration")
 export class DialogYamlIntegration extends LitElement {
@@ -13,11 +16,18 @@ export class DialogYamlIntegration extends LitElement {
 
   @state() private _params?: YamlIntegrationDialogParams;
 
+  @state() private _open = false;
+
   public showDialog(params: YamlIntegrationDialogParams): void {
     this._params = params;
+    this._open = true;
   }
 
   public closeDialog() {
+    this._open = false;
+  }
+
+  private _dialogClosed(): void {
     this._params = undefined;
     fireEvent(this, "dialog-closed", { dialog: this.localName });
   }
@@ -31,43 +41,51 @@ export class DialogYamlIntegration extends LitElement {
       ? documentationUrl(this.hass, `/integrations/${manifest.domain}`)
       : manifest.documentation;
     return html`
-      <ha-dialog
-        open
-        @closed=${this.closeDialog}
-        .heading=${this.hass.localize(
+      <ha-wa-dialog
+        .hass=${this.hass}
+        .open=${this._open}
+        header-title=${this.hass.localize(
           "ui.panel.config.integrations.config_flow.yaml_only_title"
         )}
+        @closed=${this._dialogClosed}
       >
         <p>
           ${this.hass.localize(
             "ui.panel.config.integrations.config_flow.yaml_only"
           )}
         </p>
-        <ha-button
-          appearance="plain"
-          @click=${this.closeDialog}
-          slot="primaryAction"
-        >
-          ${this.hass.localize("ui.common.cancel")}
-        </ha-button>
-        ${docLink
-          ? html`<ha-button
-              appearance="plain"
-              href=${docLink}
-              target="_blank"
-              rel="noreferrer noopener"
-              slot="primaryAction"
-              @click=${this.closeDialog}
-              dialogInitialFocus
-            >
-              ${this.hass.localize(
-                "ui.panel.config.integrations.config_flow.open_documentation"
-              )}
-            </ha-button>`
-          : html`<ha-button @click=${this.closeDialog} dialogInitialFocus>
-              ${this.hass.localize("ui.common.ok")}
-            </ha-button>`}
-      </ha-dialog>
+        <ha-dialog-footer slot="footer">
+          <ha-button
+            slot="secondaryAction"
+            appearance="plain"
+            @click=${this.closeDialog}
+          >
+            ${this.hass.localize("ui.common.cancel")}
+          </ha-button>
+          ${docLink
+            ? html`<ha-button
+                slot="primaryAction"
+                appearance="plain"
+                href=${docLink}
+                target="_blank"
+                rel="noreferrer noopener"
+                @click=${this.closeDialog}
+                autofocus
+              >
+                <ha-svg-icon slot="end" .path=${mdiOpenInNew}></ha-svg-icon>
+                ${this.hass.localize(
+                  "ui.panel.config.integrations.config_flow.open_documentation"
+                )}
+              </ha-button>`
+            : html`<ha-button
+                slot="primaryAction"
+                @click=${this.closeDialog}
+                autofocus
+              >
+                ${this.hass.localize("ui.common.ok")}
+              </ha-button>`}
+        </ha-dialog-footer>
+      </ha-wa-dialog>
     `;
   }
 
@@ -79,15 +97,10 @@ export class DialogYamlIntegration extends LitElement {
     a {
       text-decoration: none;
     }
-    ha-dialog {
+    ha-wa-dialog {
       /* Place above other dialogs */
       --dialog-z-index: 104;
     }
-    @media all and (min-width: 600px) {
-      ha-dialog {
-        --mdc-dialog-min-width: 400px;
-      }
-    }
   `;
 }