diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts
index ec04f21acd..6f52d6135f 100644
--- a/src/panels/lovelace/components/hui-card-options.ts
+++ b/src/panels/lovelace/components/hui-card-options.ts
@@ -1,7 +1,15 @@
 import "@material/mwc-button";
 import { ActionDetail } from "@material/mwc-list/mwc-list-foundation";
-import "@material/mwc-list/mwc-list-item";
-import { mdiArrowDown, mdiArrowUp, mdiDotsVertical } from "@mdi/js";
+import {
+  mdiArrowDown,
+  mdiArrowUp,
+  mdiContentCopy,
+  mdiContentCut,
+  mdiContentDuplicate,
+  mdiDelete,
+  mdiDotsVertical,
+  mdiFileMoveOutline,
+} from "@mdi/js";
 import deepClone from "deep-clone-simple";
 import {
   CSSResultGroup,
@@ -17,11 +25,13 @@ import { storage } from "../../../common/decorators/storage";
 import { fireEvent } from "../../../common/dom/fire_event";
 import "../../../components/ha-button-menu";
 import "../../../components/ha-icon-button";
+import "../../../components/ha-list-item";
 import { LovelaceCardConfig, saveConfig } from "../../../data/lovelace";
 import {
   showAlertDialog,
   showPromptDialog,
 } from "../../../dialogs/generic/show-dialog-box";
+import { haStyle } from "../../../resources/styles";
 import { HomeAssistant } from "../../../types";
 import { showSaveSuccessToast } from "../../../util/toast-saved-success";
 import { computeCardSize } from "../common/compute-card-size";
@@ -122,31 +132,51 @@ export class HuiCardOptions extends LitElement {
                 )}
                 .path=${mdiDotsVertical}
               ></ha-icon-button>
-              <mwc-list-item>
+              <ha-list-item graphic="icon">
+                <ha-svg-icon
+                  slot="graphic"
+                  .path=${mdiFileMoveOutline}
+                ></ha-svg-icon>
                 ${this.hass!.localize(
                   "ui.panel.lovelace.editor.edit_card.move"
-                )}</mwc-list-item
-              >
-              <mwc-list-item
-                >${this.hass!.localize(
+                )}
+              </ha-list-item>
+              <ha-list-item graphic="icon">
+                <ha-svg-icon
+                  slot="graphic"
+                  .path=${mdiContentDuplicate}
+                ></ha-svg-icon>
+                ${this.hass!.localize(
                   "ui.panel.lovelace.editor.edit_card.duplicate"
-                )}</mwc-list-item
-              >
-              <mwc-list-item
-                >${this.hass!.localize(
+                )}
+              </ha-list-item>
+              <ha-list-item graphic="icon">
+                <ha-svg-icon
+                  slot="graphic"
+                  .path=${mdiContentCopy}
+                ></ha-svg-icon>
+                ${this.hass!.localize(
                   "ui.panel.lovelace.editor.edit_card.copy"
-                )}</mwc-list-item
-              >
-              <mwc-list-item
-                >${this.hass!.localize(
-                  "ui.panel.lovelace.editor.edit_card.cut"
-                )}</mwc-list-item
-              >
-              <mwc-list-item class="delete-item">
+                )}
+              </ha-list-item>
+              <ha-list-item graphic="icon">
+                <ha-svg-icon
+                  slot="graphic"
+                  .path=${mdiContentCut}
+                ></ha-svg-icon>
+                ${this.hass!.localize("ui.panel.lovelace.editor.edit_card.cut")}
+              </ha-list-item>
+              <li divider role="separator"></li>
+              <ha-list-item class="warning" graphic="icon">
+                <ha-svg-icon
+                  class="warning"
+                  slot="graphic"
+                  .path=${mdiDelete}
+                ></ha-svg-icon>
                 ${this.hass!.localize(
                   "ui.panel.lovelace.editor.edit_card.delete"
-                )}</mwc-list-item
-              >
+                )}
+              </ha-list-item>
             </ha-button-menu>
           </div>
         </div>
@@ -155,65 +185,64 @@ export class HuiCardOptions extends LitElement {
   }
 
   static get styles(): CSSResultGroup {
-    return css`
-      :host(:hover) {
-        outline: 2px solid var(--primary-color);
-      }
+    return [
+      haStyle,
+      css`
+        :host(:hover) {
+          outline: 2px solid var(--primary-color);
+        }
 
-      :host(:not(.panel)) ::slotted(*) {
-        display: block;
-      }
+        :host(:not(.panel)) ::slotted(*) {
+          display: block;
+        }
 
-      :host(.panel) .card {
-        height: calc(100% - 59px);
-      }
+        :host(.panel) .card {
+          height: calc(100% - 59px);
+        }
 
-      ha-card {
-        border-top-right-radius: 0;
-        border-top-left-radius: 0;
-      }
+        ha-card {
+          border-top-right-radius: 0;
+          border-top-left-radius: 0;
+        }
 
-      .card-actions {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
+        .card-actions {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
 
-      .right {
-        display: flex;
-        align-items: center;
-      }
+        .right {
+          display: flex;
+          align-items: center;
+        }
 
-      .position-badge {
-        display: block;
-        width: 24px;
-        line-height: 24px;
-        box-sizing: border-box;
-        border-radius: 50%;
-        font-weight: 500;
-        text-align: center;
-        font-size: 14px;
-        background-color: var(--app-header-edit-background-color, #455a64);
-        color: var(--app-header-edit-text-color, white);
-      }
+        .position-badge {
+          display: block;
+          width: 24px;
+          line-height: 24px;
+          box-sizing: border-box;
+          border-radius: 50%;
+          font-weight: 500;
+          text-align: center;
+          font-size: 14px;
+          background-color: var(--app-header-edit-background-color, #455a64);
+          color: var(--app-header-edit-text-color, white);
+        }
 
-      ha-icon-button {
-        color: var(--primary-text-color);
-      }
+        ha-icon-button {
+          color: var(--primary-text-color);
+        }
 
-      ha-icon-button.move-arrow[disabled] {
-        color: var(--disabled-text-color);
-      }
+        ha-icon-button.move-arrow[disabled] {
+          color: var(--disabled-text-color);
+        }
 
-      mwc-list-item {
-        cursor: pointer;
-        white-space: nowrap;
-      }
-
-      mwc-list-item.delete-item {
-        color: var(--error-color);
-      }
-    `;
+        ha-list-item {
+          cursor: pointer;
+          white-space: nowrap;
+        }
+      `,
+    ];
   }
 
   private _handleAction(ev: CustomEvent<ActionDetail>) {
diff --git a/src/translations/en.json b/src/translations/en.json
index 05ff2b775e..ea9e09b5ef 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -4548,10 +4548,10 @@
             "add": "Add Card",
             "edit": "Edit",
             "clear": "Clear",
-            "delete": "Delete card",
-            "copy": "Copy card",
-            "cut": "Cut card",
-            "duplicate": "Duplicate card",
+            "delete": "Delete",
+            "copy": "Copy",
+            "cut": "Cut",
+            "duplicate": "Duplicate",
             "move": "Move to view",
             "move_up": "Move card up",
             "move_down": "Move card down",