diff --git a/src/components/ha-yaml-editor.ts b/src/components/ha-yaml-editor.ts
index a637a28cc3..046fcd36ca 100644
--- a/src/components/ha-yaml-editor.ts
+++ b/src/components/ha-yaml-editor.ts
@@ -6,6 +6,13 @@ import { afterNextRender } from "../common/util/render-status";
 // tslint:disable-next-line
 import { HaCodeEditor } from "./ha-code-editor";
 
+declare global {
+  // for fire event
+  interface HASSDomEvents {
+    "editor-refreshed": undefined;
+  }
+}
+
 const isEmpty = (obj: object) => {
   if (typeof obj !== "object") {
     return false;
@@ -37,6 +44,7 @@ export class HaYamlEditor extends LitElement {
       if (this._editor?.codemirror) {
         this._editor.codemirror.refresh();
       }
+      afterNextRender(() => fireEvent(this, "editor-refreshed"));
     });
   }
 
diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts
index 2b44e165b1..b51641dc22 100644
--- a/src/panels/lovelace/editor/hui-dialog-save-config.ts
+++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts
@@ -6,9 +6,11 @@ import {
   CSSResult,
   customElement,
   property,
+  query,
 } from "lit-element";
 import "@polymer/paper-spinner/paper-spinner";
 import "../../../components/dialog/ha-paper-dialog";
+import "../../../components/ha-yaml-editor";
 // tslint:disable-next-line:no-duplicate-imports
 import { HaPaperDialog } from "../../../components/dialog/ha-paper-dialog";
 import "@material/mwc-button";
@@ -16,6 +18,8 @@ import "@material/mwc-button";
 import { haStyleDialog } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { SaveDialogParams } from "./show-save-config-dialog";
+import { PolymerChangedEvent } from "../../../polymer-types";
+import { fireEvent } from "../../../common/dom/fire_event";
 
 @customElement("hui-dialog-save-config")
 export class HuiSaveConfig extends LitElement {
@@ -24,6 +28,7 @@ export class HuiSaveConfig extends LitElement {
   @property() private _params?: SaveDialogParams;
 
   @property() private _saving: boolean;
+  @query("ha-paper-dialog") private _dialog?: HaPaperDialog;
 
   public constructor() {
     super();
@@ -33,16 +38,19 @@ export class HuiSaveConfig extends LitElement {
   public async showDialog(params: SaveDialogParams): Promise<void> {
     this._params = params;
     await this.updateComplete;
-    this._dialog.open();
-  }
-
-  private get _dialog(): HaPaperDialog {
-    return this.shadowRoot!.querySelector("ha-paper-dialog")!;
+    this._dialog!.open();
   }
 
   protected render(): TemplateResult {
+    if (!this._params) {
+      return html``;
+    }
     return html`
-      <ha-paper-dialog with-backdrop>
+      <ha-paper-dialog
+        with-backdrop
+        opened
+        @opened-changed=${this._openedChanged}
+      >
         <h2>
           ${this.hass!.localize("ui.panel.lovelace.editor.save_config.header")}
         </h2>
@@ -50,34 +58,81 @@ export class HuiSaveConfig extends LitElement {
           <p>
             ${this.hass!.localize("ui.panel.lovelace.editor.save_config.para")}
           </p>
-          <p>
-            ${this.hass!.localize(
-              "ui.panel.lovelace.editor.save_config.para_sure"
-            )}
-          </p>
+          ${this._params.mode === "storage"
+            ? html`
+                <p>
+                  ${this.hass!.localize(
+                    "ui.panel.lovelace.editor.save_config.para_sure"
+                  )}
+                </p>
+              `
+            : html`
+                <p>
+                  ${this.hass!.localize(
+                    "ui.panel.lovelace.editor.save_config.yaml_mode"
+                  )}
+                </p>
+                <p>
+                  ${this.hass!.localize(
+                    "ui.panel.lovelace.editor.save_config.yaml_control"
+                  )}
+                </p>
+                <p>
+                  ${this.hass!.localize(
+                    "ui.panel.lovelace.editor.save_config.yaml_config"
+                  )}
+                </p>
+                <ha-yaml-editor
+                  .defaultValue=${this._params!.lovelace.config}
+                  @editor-refreshed=${this._editorRefreshed}
+                ></ha-yaml-editor>
+              `}
         </paper-dialog-scrollable>
         <div class="paper-dialog-buttons">
-          <mwc-button @click="${this._closeDialog}"
-            >${this.hass!.localize(
-              "ui.panel.lovelace.editor.save_config.cancel"
-            )}</mwc-button
-          >
-          <mwc-button ?disabled="${this._saving}" @click="${this._saveConfig}">
-            <paper-spinner
-              ?active="${this._saving}"
-              alt="Saving"
-            ></paper-spinner>
-            ${this.hass!.localize(
-              "ui.panel.lovelace.editor.save_config.save"
-            )}</mwc-button
-          >
+          ${this._params.mode === "storage"
+            ? html`
+                <mwc-button @click="${this._closeDialog}"
+                  >${this.hass!.localize(
+                    "ui.panel.lovelace.editor.save_config.cancel"
+                  )}
+                </mwc-button>
+                <mwc-button
+                  ?disabled="${this._saving}"
+                  @click="${this._saveConfig}"
+                >
+                  <paper-spinner
+                    ?active="${this._saving}"
+                    alt="Saving"
+                  ></paper-spinner>
+                  ${this.hass!.localize(
+                    "ui.panel.lovelace.editor.save_config.save"
+                  )}
+                </mwc-button>
+              `
+            : html`
+                <mwc-button @click=${this._closeDialog}
+                  >${this.hass!.localize(
+                    "ui.panel.lovelace.editor.save_config.close"
+                  )}
+                </mwc-button>
+              `}
         </div>
       </ha-paper-dialog>
     `;
   }
 
   private _closeDialog(): void {
-    this._dialog.close();
+    this._dialog!.close();
+  }
+
+  private _openedChanged(ev: PolymerChangedEvent<boolean>): void {
+    if (!ev.detail.value) {
+      this._params = undefined;
+    }
+  }
+
+  private _editorRefreshed() {
+    fireEvent(this._dialog! as HTMLElement, "iron-resize");
   }
 
   private async _saveConfig(): Promise<void> {
diff --git a/src/panels/lovelace/editor/show-save-config-dialog.ts b/src/panels/lovelace/editor/show-save-config-dialog.ts
index 62615d6db6..96c7cb9ed6 100644
--- a/src/panels/lovelace/editor/show-save-config-dialog.ts
+++ b/src/panels/lovelace/editor/show-save-config-dialog.ts
@@ -13,6 +13,7 @@ const dialogTag = "hui-dialog-save-config";
 
 export interface SaveDialogParams {
   lovelace: Lovelace;
+  mode: "yaml" | "storage";
 }
 
 let registeredDialog = false;
diff --git a/src/panels/lovelace/ha-panel-lovelace.ts b/src/panels/lovelace/ha-panel-lovelace.ts
index 3a44999272..9cf9f46cd7 100644
--- a/src/panels/lovelace/ha-panel-lovelace.ts
+++ b/src/panels/lovelace/ha-panel-lovelace.ts
@@ -339,6 +339,7 @@ class LovelacePanel extends LitElement {
         }
         showSaveDialog(this, {
           lovelace: this.lovelace!,
+          mode: this.panel!.config.mode,
         });
       },
       saveConfig: async (newConfig: LovelaceConfig): Promise<void> => {
diff --git a/src/translations/en.json b/src/translations/en.json
index 19985e2b29..cedffd2311 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -1935,7 +1935,11 @@
             "header": "Take control of your Lovelace UI",
             "para": "By default Home Assistant will maintain your user interface, updating it when new entities or Lovelace UI components become available. If you take control we will no longer make changes automatically for you.",
             "para_sure": "Are you sure you want to take control of your user interface?",
+            "yaml_mode": "You are using YAML mode, that means you can not change your Lovelace config from the UI. If you want to change Lovelace from the UI, remove the 'mode: yaml' from your Lovelace configuration in 'configuration.yaml.'",
+            "yaml_control": "To take control in YAML mode, create a YAML file with the name you specified in your config for this dashboard, or the default 'ui-lovelace.yaml'.",
+            "yaml_config": "To help you start here is the current config of this dashboard:",
             "cancel": "Never mind",
+            "close": "Close",
             "save": "Take control"
           },
           "migrate": {