diff --git a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
index 72da14e3ea..57adc6f581 100644
--- a/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
+++ b/src/panels/lovelace/cards/hui-horizontal-stack-card.ts
@@ -29,19 +29,26 @@ export class HuiHorizontalStackCard extends HuiStackCard {
           display: flex;
           height: 100%;
         }
+        #root {
+          --stack-card-side-margin: 4px;
+        }
         #root > * {
           flex: 1 1 0;
           margin: var(
             --horizontal-stack-card-margin,
-            var(--stack-card-margin, 0 4px)
+            var(--stack-card-margin, 0 var(--stack-card-side-margin))
           );
           min-width: 0;
         }
         #root > *:first-child {
           margin-left: 0;
+          margin-inline-start: 0;
+          margin-inline-end: var(--stack-card-side-margin);
         }
         #root > *:last-child {
           margin-right: 0;
+          margin-inline-end: 0;
+          margin-inline-start: var(--stack-card-side-margin);
         }
       `,
     ];
diff --git a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
index b801108ff5..2b190b9354 100644
--- a/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-stack-card-editor.ts
@@ -1,6 +1,4 @@
 import {
-  mdiArrowLeft,
-  mdiArrowRight,
   mdiCodeBraces,
   mdiContentCopy,
   mdiContentCut,
@@ -25,6 +23,8 @@ import {
 import { storage } from "../../../../common/decorators/storage";
 import { HASSDomEvent, fireEvent } from "../../../../common/dom/fire_event";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-icon-button-arrow-prev";
+import "../../../../components/ha-icon-button-arrow-next";
 import type { LovelaceCardConfig } from "../../../../data/lovelace/config/card";
 import type { LovelaceConfig } from "../../../../data/lovelace/config/types";
 import { HomeAssistant } from "../../../../types";
@@ -131,25 +131,23 @@ export class HuiStackCardEditor
                     .path=${isGuiMode ? mdiCodeBraces : mdiListBoxOutline}
                   ></ha-icon-button>
 
-                  <ha-icon-button
+                  <ha-icon-button-arrow-prev
                     .disabled=${selected === 0}
                     .label=${this.hass!.localize(
                       "ui.panel.lovelace.editor.edit_card.move_before"
                     )}
-                    .path=${mdiArrowLeft}
                     @click=${this._handleMove}
                     .move=${-1}
-                  ></ha-icon-button>
+                  ></ha-icon-button-arrow-prev>
 
-                  <ha-icon-button
+                  <ha-icon-button-arrow-next
                     .label=${this.hass!.localize(
                       "ui.panel.lovelace.editor.edit_card.move_after"
                     )}
-                    .path=${mdiArrowRight}
                     .disabled=${selected === numcards - 1}
                     @click=${this._handleMove}
                     .move=${1}
-                  ></ha-icon-button>
+                  ></ha-icon-button-arrow-next>
 
                   <ha-icon-button
                     .label=${this.hass!.localize(