diff --git a/frontend/playwright/ui/visual-specs/workspace.spec.js b/frontend/playwright/ui/visual-specs/workspace.spec.js
index 73c5e2a524..7d21687ba7 100644
--- a/frontend/playwright/ui/visual-specs/workspace.spec.js
+++ b/frontend/playwright/ui/visual-specs/workspace.spec.js
@@ -449,3 +449,39 @@ test.describe("Imported SVG attributes", () => {
     });
   });
 });
+
+test.describe("Grid cell options", () => {
+  test("Shows the grid cell options when selecting a cell", 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");
+    await page
+      .getByTestId("inspect-layout")
+      .getByRole("button", { name: "Edit grid" })
+      .click();
+
+    // Click the first cell of the grid editor.
+    const cell = page.locator("g.cell-editor > rect").first();
+    const box = await cell.boundingBox();
+    await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
+
+    await expect(workspace.rightSidebar.getByText("Grid cell")).toBeVisible();
+    // The cell options are a small part of the sidebar: compare every pixel.
+    await expect(workspace.rightSidebar).toHaveScreenshot({
+      maxDiffPixelRatio: 0,
+      threshold: 0,
+    });
+  });
+});
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs
index 2434c66c07..b7ee6b4f6e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.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.button :refer [button*]]
    [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as deprecated-icon]
@@ -289,8 +290,7 @@
                                  :set-alignment set-justify-self}]]
 
         [:div {:class (stl/css :row)}
-         [:button
-          {:class (stl/css :edit-grid-btn)
-           :alt    (tr "workspace.layout-grid.editor.options.edit-grid")
-           :on-click toggle-edit-mode}
+         [:> button* {:variant "secondary"
+                      :class (stl/css :edit-grid-btn)
+                      :on-click toggle-edit-mode}
           (tr "workspace.layout-grid.editor.options.edit-grid")]]])]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss
index 8c245a491f..6b2092b133 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss
@@ -4,14 +4,20 @@
 //
 // Copyright (c) KALEIDOS SUBSIDIARY SL
 
+// Only for %input-element and %button-icon: the inputs and their icons move
+// to the DS in their own plan.
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/_borders.scss" as *;
+@use "ds/_utils.scss" as *;
+@use "ds/typography.scss" as *;
 @use "../../../sidebar/common/sidebar.scss" as sidebar;
 
 .grid-cell-menu-container {
-  @include deprecated.flex-column;
-
-  margin-top: deprecated.$s-8;
-  gap: deprecated.$s-16;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sp-l);
+  grid-column: span 8;
+  margin-block-start: var(--sp-s);
 }
 
 .grid-cell-menu {
@@ -20,55 +26,52 @@
 
 .grid-cell-menu-title {
   grid-column: span 8;
-  font-size: deprecated.$fs-11;
-}
-
-.grid-cell-menu-container {
-  grid-column: span 8;
+  font-size: px2rem(11);
 }
 
 .row {
-  @include deprecated.flex-row;
+  display: flex;
+  align-items: center;
+  gap: var(--sp-xs);
 }
 
 .cell-mode :global(label) {
-  padding: 0 deprecated.$s-12;
+  padding: 0 var(--sp-m);
 }
 
 .edit-grid-btn {
-  @extend %button-secondary;
-  @include deprecated.uppercase-title-typography;
-
-  width: 100%;
-  padding: deprecated.$s-8;
+  justify-content: center;
+  inline-size: 100%;
 }
 
 .area-input {
   @extend %input-element;
-  @include deprecated.body-small-typography;
+  @include use-typography("body-small");
 
-  width: 100%;
-  padding: deprecated.$s-8;
+  inline-size: 100%;
+  padding: var(--sp-s);
 }
 
 .grid-coord-group {
-  @include deprecated.flex-row;
-
-  border-radius: deprecated.$br-8;
-  padding-left: deprecated.$s-4;
-  background-color: var(--input-background-color);
+  display: flex;
+  align-items: center;
+  gap: var(--sp-xs);
+  border-radius: $br-8;
+  padding-inline-start: var(--sp-xs);
+  background-color: var(--color-background-tertiary);
 }
 
+// The legacy icon is a raw svg with no class of its own.
 .icon svg {
   @extend %button-icon;
 
-  stroke: var(--icon-foreground);
+  stroke: var(--color-foreground-secondary);
 }
 
 .coord-input {
   @extend %input-element;
-  @include deprecated.body-small-typography;
+  @include use-typography("body-small");
 
-  border-radius: 0 deprecated.$br-8 deprecated.$br-8 0;
-  border-left: deprecated.$s-1 solid var(--panel-background-color);
+  border-radius: 0 $br-8 $br-8 0;
+  border-inline-start: $b-1 solid var(--color-background-primary);
 }