diff --git a/frontend/playwright/ui/visual-specs/workspace.spec.js b/frontend/playwright/ui/visual-specs/workspace.spec.js
index a9be81bf91..7ae69e0520 100644
--- a/frontend/playwright/ui/visual-specs/workspace.spec.js
+++ b/frontend/playwright/ui/visual-specs/workspace.spec.js
@@ -53,6 +53,44 @@ test.describe("Viewport", () => {
   });
 });
 
+test.describe("Grid layout", () => {
+  test("Shows the grid layout options and the grid editor", async ({
+    page,
+  }) => {
+    const workspace = new WorkspacePage(page);
+    await workspace.setupEmptyFile();
+    await workspace.mockRPC(/get\-file\?/, "workspace/get-file-9042.json");
+    await workspace.mockRPC(
+      "get-file-fragment?file-id=*&fragment-id=*",
+      "workspace/get-file-fragment-9042.json",
+    );
+    await workspace.goToWorkspace({
+      fileId: "af2494d0-39ba-8184-8005-230696f6df5c",
+      pageId: "af2494d0-39ba-8184-8005-230696f6df5d",
+    });
+
+    await workspace.clickLeafLayer("Board");
+    const section = page.getByTestId("inspect-layout");
+    await expect(section.getByRole("button", { name: "Edit grid" }))
+      .toBeVisible();
+    // The buttons are a small part of the section: compare every pixel.
+    await expect(section).toHaveScreenshot("grid-layout-options.png", {
+      maxDiffPixelRatio: 0,
+      threshold: 0,
+    });
+
+    await section.getByRole("button", { name: "Edit grid" }).click();
+    await expect(workspace.rightSidebar.getByText("GRID LAYOUT")).toBeVisible();
+    // Expand the column tracks so their rows show too.
+    await workspace.rightSidebar.getByText(/^Columns? \d/).click();
+    await page.mouse.move(0, 0);
+    await expect(workspace.rightSidebar).toHaveScreenshot(
+      "grid-layout-editor.png",
+      { maxDiffPixelRatio: 0, threshold: 0 },
+    );
+  });
+});
+
 test.describe("Design tab", () => {
   test("Shows the boolean options when selecting two shapes", async ({
     page,
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
index 5e043118d2..f8dcee251d 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
@@ -25,8 +25,9 @@
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.components.title-bar :refer [title-bar*]]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.foundations.assets.icon :as i]
+   [app.main.ui.ds.foundations.assets.icon :as i :refer [icon*]]
    [app.main.ui.formats :as fmt]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as deprecated-icon]
@@ -845,10 +846,9 @@
            (if-not active?
              (st/emit! (udw/start-edition-mode id))
              (st/emit! :interrupt))))]
-    [:button
-     {:class (stl/css :edit-mode-btn)
-      :alt  "Grid edit mode"
-      :on-click toggle-edit-mode}
+    [:> button* {:variant "secondary"
+                 :class (stl/css :edit-mode-btn)
+                 :on-click toggle-edit-mode}
      (tr "workspace.layout-grid.editor.options.edit-grid")]))
 
 (mf/defc align-grid-row
@@ -988,7 +988,8 @@
      [:div {:class (stl/css :track-info-container)}
       [:div {:class (stl/css :track-info-dir-icon)
              :on-click handle-select-track}
-       (if is-column deprecated-icon/flex-vertical deprecated-icon/flex-horizontal)]
+       [:> icon* {:icon-id (if is-column i/flex-vertical i/flex-horizontal)
+                  :class (stl/css :track-info-dir)}]]
 
       [:div {:class (stl/css :track-info-value)}
        [:> deprecated-input/numeric-input* {:no-validate true
@@ -1036,11 +1037,13 @@
 
     [:div {:class (stl/css :grid-tracks) :data-testid testid}
      [:div {:class (stl/css :grid-track-header)}
-      [:button {:class (stl/css :expand-icon) :on-click toggle} deprecated-icon/menu]
+      [:button {:class (stl/css :expand-icon) :on-click toggle}
+       [:> icon* {:icon-id i/menu :class (stl/css :expand-icon-svg)}]]
       [:div {:class (stl/css :track-title) :on-click toggle}
        [:div {:class (stl/css :track-name) :title track-name} track-name]
        [:div {:class (stl/css :track-detail) :title track-detail} track-detail]]
-      [:button {:class (stl/css :add-column) :on-click add-track} deprecated-icon/add]]
+      [:button {:class (stl/css :add-column) :on-click add-track}
+       [:> icon* {:icon-id i/add :size "s" :class (stl/css :add-column-svg)}]]]
 
      (when expanded?
        [:> h/sortable-container* {}
@@ -1568,8 +1571,9 @@
                         :aria-label (tr "labels.help-center")
                         :on-click open-grid-help
                         :icon i/help}]
-      [:button {:class (stl/css :exit-btn)
-                :on-click #(st/emit! (udw/clear-edition-mode))}
+      [:> button* {:variant "secondary"
+                   :class (stl/css :exit-btn)
+                   :on-click #(st/emit! (udw/clear-edition-mode))}
        (tr "workspace.layout-grid.editor.options.exit")]]
 
      [:div {:class (stl/css :row :first-row)}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
index 123efabf29..34f3d81b43 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
@@ -176,22 +176,14 @@
   grid-column: span 5;
 }
 
-// TODO: Replace this buttons with DS buttons
 .edit-mode-btn {
-  @extend %button-secondary;
-  @include t.use-typography("headline-small");
-
   inline-size: 100%;
-  padding: var(--sp-s);
+  justify-content: center;
   grid-column: span 7;
 }
 
-// TODO: Replace this buttons with DS buttons
 .exit-btn {
-  @extend %button-secondary;
-  @include t.use-typography("headline-small");
-
-  padding: var(--sp-s) var(--sp-xl);
+  justify-content: center;
   grid-column: span 2;
 }
 
@@ -237,22 +229,17 @@
   grid-column: 1 / span 7;
 }
 
-// TODO: Replace this buttons with DS buttons
 .track-info-dir-icon {
+  display: flex;
+  align-items: center;
   cursor: pointer;
   border-radius: $br-8 0 0 $br-8;
   background-color: var(--color-background-tertiary);
   padding: 0 var(--sp-s);
+  color: var(--color-foreground-secondary);
 
-  svg {
-    @extend %button-icon;
-
-    stroke: var(--color-foreground-secondary);
-    block-size: 100%;
-  }
-
-  &:hover svg {
-    stroke: var(--color-foreground-primary);
+  &:hover {
+    color: var(--color-foreground-primary);
   }
 }
 
@@ -309,7 +296,8 @@
   color: var(--color-foreground-secondary);
 }
 
-// TODO: Replace this buttons with DS buttons
+// Raw buttons on purpose: they are 52px segments of the track header, not
+// DS buttons. The nested icon rules win over the placeholder svg colors.
 .expand-icon {
   @extend %button-secondary;
 
@@ -317,38 +305,23 @@
   border-radius: $br-8 0 0 $br-8;
   border-inline-end: $b-1 solid var(--color-background-primary);
 
-  svg {
-    @extend %button-icon;
-
+  .expand-icon-svg {
     stroke: var(--color-foreground-secondary);
-    fill: var(--color-foreground-secondary);
   }
 
-  &:hover,
-  &:active {
-    svg {
-      stroke: var(--color-accent-primary);
-      fill: var(--color-accent-primary);
-    }
+  &:hover .expand-icon-svg,
+  &:active .expand-icon-svg {
+    stroke: var(--color-accent-primary);
   }
 }
 
-// TODO: Replace this buttons with DS buttons
 .add-column {
   @extend %button-tertiary;
 
   block-size: px2rem(52);
 
-  svg {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    color: transparent;
-    stroke-width: px2rem(1);
-    block-size: $sz-12;
-    inline-size: $sz-12;
+  .add-column-svg {
     stroke: var(--color-foreground-secondary);
-    fill: var(--color-foreground-secondary);
   }
 }