diff --git a/frontend/playwright/ui/visual-specs/workspace.spec.js b/frontend/playwright/ui/visual-specs/workspace.spec.js
index e3cf6f1358..6eba9b5bd5 100644
--- a/frontend/playwright/ui/visual-specs/workspace.spec.js
+++ b/frontend/playwright/ui/visual-specs/workspace.spec.js
@@ -133,6 +133,50 @@ test.describe("Design tab", () => {
       threshold: 0,
     });
   });
+
+  test("Shows the margin modes of a flex layout element", async ({ page }) => {
+    const workspace = new WorkspacePage(page);
+    await workspace.setupEmptyFile();
+    await workspace.mockRPC(/get\-file\?/, "workspace/get-file-7760.json");
+    await workspace.mockRPC(
+      "get-file-fragment?file-id=*&fragment-id=*",
+      "workspace/get-file-fragment-7760.json",
+    );
+    await workspace.mockRPC(
+      "update-file?id=*",
+      "workspace/update-file-create-rect.json",
+    );
+    await workspace.goToWorkspace({
+      fileId: "cd90e028-326a-80b4-8004-7cdec16ffad5",
+      pageId: "cd90e028-326a-80b4-8004-7cdec16ffad6",
+    });
+
+    await workspace.clickToggableLayer("Flex Board");
+    await workspace.clickLeafLayer("Rectangle");
+
+    const section = workspace.rightSidebar.getByRole("region", {
+      name: "Layout item section",
+    });
+    const marginMode = section.getByRole("button", {
+      name: "Margin - multiple",
+    });
+    await expect(marginMode).toBeVisible();
+    // The margin button is a small part of the section: compare every pixel.
+    await expect(section).toHaveScreenshot("margin-simple.png", {
+      maxDiffPixelRatio: 0,
+      threshold: 0,
+    });
+
+    await marginMode.click();
+    await marginMode.blur();
+    await page.mouse.move(0, 0);
+    await expect(section.getByRole("textbox", { name: "Top margin" }))
+      .toBeVisible();
+    await expect(section).toHaveScreenshot("margin-multiple.png", {
+      maxDiffPixelRatio: 0,
+      threshold: 0,
+    });
+  });
 });
 
 test.describe("Assets tab", () => {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
index 659aea2fb3..28443e1e7e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
@@ -19,6 +19,7 @@
    [app.main.ui.components.numeric-input :as deprecated-input]
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.components.title-bar :refer [title-bar*]]
+   [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.workspace.sidebar.options.common :as soc]
@@ -408,12 +409,13 @@
         (= type :multiple)
         [:> margin-multiple* props])]
 
-     [:button {:class (stl/css-case
-                       :margin-mode true
-                       :selected (= type :multiple))
-               :title "Margin - multiple"
-               :on-click on-type-change'}
-      deprecated-icon/margin]]))
+     [:> icon-button* {:variant "ghost"
+                       :tooltip-class (stl/css :margin-mode)
+                       :tooltip-placement "top-left"
+                       :aria-pressed (= type :multiple)
+                       :aria-label "Margin - multiple"
+                       :icon i/margin
+                       :on-click on-type-change'}]]))
 
 (mf/defc element-behaviour-horizontal
   {::mf/props :obj
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss
index 52b6a165e3..914bc85ffc 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss
@@ -78,18 +78,7 @@
 }
 
 .margin-mode {
-  @extend %button-tertiary;
-
   grid-column: 3;
-  height: deprecated.$s-32;
-
-  svg {
-    @extend %button-icon;
-  }
-
-  &.selected {
-    @extend %button-icon-selected;
-  }
 }
 
 .margin-simple {