diff --git a/src/managers/notification-manager.ts b/src/managers/notification-manager.ts
index 5795bfe0c0..c9322e480d 100644
--- a/src/managers/notification-manager.ts
+++ b/src/managers/notification-manager.ts
@@ -82,9 +82,10 @@ class NotificationManager extends LitElement {
 
   static get styles(): CSSResult {
     return css`
-      :host {
+      ha-toast {
         display: flex;
         align-items: center;
+        justify-content: space-between;
       }
       mwc-button {
         color: var(--primary-color);
diff --git a/src/panels/lovelace/editor/config-util.ts b/src/panels/lovelace/editor/config-util.ts
index 9c87efb386..34679b0ab7 100644
--- a/src/panels/lovelace/editor/config-util.ts
+++ b/src/panels/lovelace/editor/config-util.ts
@@ -119,6 +119,40 @@ export const deleteCard = (
   };
 };
 
+export const insertCard = (
+  config: LovelaceConfig,
+  path: [number, number],
+  cardConfig: LovelaceCardConfig
+) => {
+  const [viewIndex, cardIndex] = path;
+  const views: LovelaceViewConfig[] = [];
+
+  config.views.forEach((viewConf, index) => {
+    if (index !== viewIndex) {
+      views.push(config.views[index]);
+      return;
+    }
+
+    const cards = viewConf.cards
+      ? [
+          ...viewConf.cards.slice(0, cardIndex),
+          cardConfig,
+          ...viewConf.cards.slice(cardIndex),
+        ]
+      : [cardConfig];
+
+    views.push({
+      ...viewConf,
+      cards,
+    });
+  });
+
+  return {
+    ...config,
+    views,
+  };
+};
+
 export const swapCard = (
   config: LovelaceConfig,
   path1: [number, number],
diff --git a/src/panels/lovelace/editor/delete-card.ts b/src/panels/lovelace/editor/delete-card.ts
index 04bada1b43..10ea035d15 100644
--- a/src/panels/lovelace/editor/delete-card.ts
+++ b/src/panels/lovelace/editor/delete-card.ts
@@ -1,5 +1,5 @@
 import { Lovelace } from "../types";
-import { deleteCard } from "./config-util";
+import { deleteCard, insertCard } from "./config-util";
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { HomeAssistant } from "../../../types";
 import { showDeleteCardDialog } from "./card-editor/show-delete-card-dialog";
@@ -16,8 +16,12 @@ export async function confDeleteCard(
     cardConfig,
     deleteCard: async () => {
       try {
-        await lovelace.saveConfig(deleteCard(lovelace.config, path));
-        showDeleteSuccessToast(element, hass!);
+        const newLovelace = deleteCard(lovelace.config, path);
+        await lovelace.saveConfig(newLovelace);
+        const action = async () => {
+          await lovelace.saveConfig(insertCard(newLovelace, path, cardConfig));
+        };
+        showDeleteSuccessToast(element, hass!, action);
       } catch (err) {
         showAlertDialog(element, {
           text: `Deleting failed: ${err.message}`,
diff --git a/src/translations/en.json b/src/translations/en.json
index 89f9780538..c4fca8b1c8 100755
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -524,6 +524,7 @@
       "cancel": "Cancel",
       "delete": "Delete",
       "close": "Close",
+      "undo": "Undo",
       "save": "Save",
       "yes": "Yes",
       "no": "No",
diff --git a/src/util/toast-deleted-success.ts b/src/util/toast-deleted-success.ts
index 6dcf0da4a8..a44028de6c 100644
--- a/src/util/toast-deleted-success.ts
+++ b/src/util/toast-deleted-success.ts
@@ -1,7 +1,19 @@
 import { showToast } from "./toast";
 import { HomeAssistant } from "../types";
+import { ShowToastParams } from "../managers/notification-manager";
 
-export const showDeleteSuccessToast = (el: HTMLElement, hass: HomeAssistant) =>
-  showToast(el, {
+export const showDeleteSuccessToast = (
+  el: HTMLElement,
+  hass: HomeAssistant,
+  action?: () => void
+) => {
+  const toastParams: ShowToastParams = {
     message: hass!.localize("ui.common.successfully_deleted"),
-  });
+  };
+
+  if (action) {
+    toastParams.action = { action, text: hass!.localize("ui.common.undo") };
+  }
+
+  showToast(el, toastParams);
+};