diff --git a/packages/dialog/src/Dialog.ts b/packages/dialog/src/Dialog.ts
index 51c311fcc7..cbaf6d32ea 100644
--- a/packages/dialog/src/Dialog.ts
+++ b/packages/dialog/src/Dialog.ts
@@ -19,6 +19,7 @@ import {
     query,
 } from '@spectrum-web-components/base';
 
+import '@spectrum-web-components/rule/sp-rule.js';
 import '@spectrum-web-components/button/sp-action-button.js';
 import alertMediumStyles from '@spectrum-web-components/icon/src/spectrum-icon-alert-medium.css.js';
 import crossLargeStyles from '@spectrum-web-components/icon/src/spectrum-icon-cross-large.css.js';
@@ -36,10 +37,10 @@ import styles from './dialog.css.js';
  *
  * @fires close - Announces that the dialog has been closed.
  */
-export class Dialog extends ObserveSlotPresence(
-    SpectrumElement,
-    '[slot="footer"]'
-) {
+export class Dialog extends ObserveSlotPresence(SpectrumElement, [
+    '[slot="footer"]',
+    '[slot="button"]',
+]) {
     public static get styles(): CSSResultArray {
         return [styles, alertMediumStyles, crossLargeStyles];
     }
@@ -51,18 +52,19 @@ export class Dialog extends ObserveSlotPresence(
     public error = false;
 
     @property({ type: Boolean, reflect: true })
-    public dismissible = false;
+    public dismissable = false;
 
     protected get hasFooter(): boolean {
-        return this.slotContentIsPresent;
+        return this.getSlotContentPresence('[slot="footer"]');
+    }
+
+    protected get hasButtons(): boolean {
+        return this.getSlotContentPresence('[slot="button"]');
     }
 
     @property({ type: Boolean, reflect: true, attribute: 'no-divider' })
     public noDivider = false;
 
-    @property({ type: Boolean, reflect: true })
-    public open = false;
-
     @property({ type: String, reflect: true })
     public mode?: 'fullscreen' | 'fullscreenTakeover';
 
@@ -92,7 +94,6 @@ export class Dialog extends ObserveSlotPresence(
     }
 
     public close(): void {
-        this.open = false;
         this.dispatchEvent(
             new Event('close', {
                 bubbles: true,
@@ -102,17 +103,17 @@ export class Dialog extends ObserveSlotPresence(
 
     protected render(): TemplateResult {
         return html`
-            <slot name="hero"></slot>
-            <div class="header">
-                <slot name="title"></slot>
+            <div class="grid">
+                <slot name="hero"></slot>
+                <slot name="heading"></slot>
                 ${this.error
                     ? html`
-                          <sp-icon class="type-icon alert-medium" size="s">
+                          <sp-icon class="type-icon alert-medium">
                               ${AlertMediumIcon({ hidden: true })}
                           </sp-icon>
                       `
                     : html``}
-                ${this.dismissible
+                ${this.dismissable
                     ? html`
                           <sp-action-button
                               class="close-button"
@@ -126,27 +127,33 @@ export class Dialog extends ObserveSlotPresence(
                           </sp-action-button>
                       `
                     : html``}
-                ${this.mode
+                ${this.noDivider
+                    ? html``
+                    : html`
+                          <sp-rule size="medium" class="divider"></sp-rule>
+                      `}
+                <div class="content">
+                    <slot @slotchange=${this.onContentSlotChange}></slot>
+                </div>
+                ${this.hasFooter
                     ? html`
-                          <slot name="button"></slot>
+                          <div class="footer">
+                              <slot name="footer"></slot>
+                          </div>
+                      `
+                    : html``}
+                ${this.hasButtons
+                    ? html`
+                          <sp-button-group
+                              class="buttonGroup ${this.hasFooter
+                                  ? ''
+                                  : 'buttonGroup--noFooter'}"
+                          >
+                              <slot name="button"></slot>
+                          </sp-button-group>
                       `
                     : html``}
             </div>
-            <div class="content">
-                <slot @slotchange=${this.onContentSlotChange}></slot>
-            </div>
-            ${!this.mode || this.hasFooter
-                ? html`
-                      <div class="footer">
-                          <slot name="footer"></slot>
-                          ${!this.mode
-                              ? html`
-                                    <slot name="button"></slot>
-                                `
-                              : html``}
-                      </div>
-                  `
-                : html``}
         `;
     }
 
diff --git a/packages/dialog/src/DialogWrapper.ts b/packages/dialog/src/DialogWrapper.ts
index 69f7e97206..718dbac1b0 100644
--- a/packages/dialog/src/DialogWrapper.ts
+++ b/packages/dialog/src/DialogWrapper.ts
@@ -24,7 +24,7 @@ import '@spectrum-web-components/underlay/sp-underlay.js';
 import '@spectrum-web-components/button/sp-button.js';
 
 import '../sp-dialog.js';
-import styles from './dialog-wrapper.css.js';
+import styles from '@spectrum-web-components/modal/src/modal.css.js';
 import { Dialog } from './Dialog.js';
 
 /**
@@ -50,7 +50,7 @@ export class DialogWrapper extends SpectrumElement {
     public confirmLabel = '';
 
     @property({ type: Boolean, reflect: true })
-    public dismissible = false;
+    public dismissable = false;
 
     @property()
     public footer = '';
@@ -159,69 +159,76 @@ export class DialogWrapper extends SpectrumElement {
                       ></sp-underlay>
                   `
                 : html``}
-            <sp-dialog
-                ?dismissible=${this.dismissible}
-                ?no-divider=${this.noDivider}
-                ?open=${this.open}
-                mode=${ifDefined(this.mode ? this.mode : undefined)}
-                size=${ifDefined(this.size ? this.size : undefined)}
-                @close=${this.close}
-            >
-                ${this.hero
-                    ? html`
-                          <img
-                              src="${this.hero}"
-                              slot="hero"
-                              aria-hidden=${ifDefined(
-                                  this.heroLabel ? undefined : 'true'
-                              )}
-                              alt=${ifDefined(
-                                  this.heroLabel ? this.heroLabel : undefined
-                              )}
-                          />
-                      `
-                    : html``}
-                ${this.headline
-                    ? html`
-                          <h2 slot="title">${this.headline}</h2>
-                      `
-                    : html``}
-                <slot></slot>
-                <div slot="footer">${this.footer}</div>
-                ${this.secondaryLabel
-                    ? html`
-                          <sp-button
-                              variant="primary"
-                              slot="button"
-                              @click=${this.clickSecondary}
-                          >
-                              ${this.secondaryLabel}
-                          </sp-button>
-                      `
-                    : html``}
-                ${this.cancelLabel
-                    ? html`
-                          <sp-button
-                              variant="secondary"
-                              slot="button"
-                              @click=${this.clickCancel}
-                          >
-                              ${this.cancelLabel}
-                          </sp-button>
-                      `
-                    : html``}
-                ${this.confirmLabel
-                    ? html`
-                          <sp-button
-                              variant="cta"
-                              slot="button"
-                              @click=${this.clickConfirm}
-                          >
-                              ${this.confirmLabel}
-                          </sp-button>
-                      `
-                    : html``}
-            </sp-dialog>
+            <div class="modal ${this.mode}">
+                <sp-dialog
+                    ?dismissable=${this.dismissable}
+                    ?no-divider=${this.noDivider}
+                    mode=${ifDefined(this.mode ? this.mode : undefined)}
+                    size=${ifDefined(this.size ? this.size : undefined)}
+                    @close=${this.close}
+                >
+                    ${this.hero
+                        ? html`
+                              <img
+                                  src="${this.hero}"
+                                  slot="hero"
+                                  aria-hidden=${ifDefined(
+                                      this.heroLabel ? undefined : 'true'
+                                  )}
+                                  alt=${ifDefined(
+                                      this.heroLabel
+                                          ? this.heroLabel
+                                          : undefined
+                                  )}
+                              />
+                          `
+                        : html``}
+                    ${this.headline
+                        ? html`
+                              <h2 slot="heading">${this.headline}</h2>
+                          `
+                        : html``}
+                    <slot></slot>
+                    ${this.footer
+                        ? html`
+                              <div slot="footer">${this.footer}</div>
+                          `
+                        : html``}
+                    ${this.secondaryLabel
+                        ? html`
+                              <sp-button
+                                  variant="primary"
+                                  slot="button"
+                                  @click=${this.clickSecondary}
+                              >
+                                  ${this.secondaryLabel}
+                              </sp-button>
+                          `
+                        : html``}
+                    ${this.cancelLabel
+                        ? html`
+                              <sp-button
+                                  variant="secondary"
+                                  slot="button"
+                                  @click=${this.clickCancel}
+                              >
+                                  ${this.cancelLabel}
+                              </sp-button>
+                          `
+                        : html``}
+                    ${this.confirmLabel
+                        ? html`
+                              <sp-button
+                                  variant="cta"
+                                  slot="button"
+                                  @click=${this.clickConfirm}
+                              >
+                                  ${this.confirmLabel}
+                              </sp-button>
+                          `
+                        : html``}
+                </sp-dialog>
+            </div>
         `;
     }
 }