diff --git a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
index e59e984967..b851d09c4e 100644
--- a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
@@ -28,6 +28,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.css-cursors :as cur]
+   [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.formats :as fmt]
    [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.workspace.viewport.viewport-ref :as uwvv]
@@ -52,18 +53,17 @@
     :flex (dm/str (fmt/format-number value) "FR")
     :auto "AUTO"))
 
-(mf/defc grid-edition-actions
-  {::mf/wrap-props false}
+(mf/defc grid-edition-actions*
   [{:keys [shape]}]
   [:div {:class (stl/css :grid-actions)}
    [:div {:class (stl/css :grid-actions-container)}
     [:div {:class (stl/css :grid-actions-title)}
      (tr "workspace.layout-grid.editor.title")  " " [:span {:stl/css :board-name} (:name shape)]]
-    [:button {:class (stl/css :locate-btn)
-              :on-click #(st/emit! (dwge/locate-board (:id shape)))}
+    [:> button* {:variant "secondary"
+                 :on-click #(st/emit! (dwge/locate-board (:id shape)))}
      (tr "workspace.layout-grid.editor.top-bar.locate")]
-    [:button {:class (stl/css :done-btn)
-              :on-click #(st/emit! (dw/clear-edition-mode))}
+    [:> button* {:variant "primary"
+                 :on-click #(st/emit! (dw/clear-edition-mode))}
      (tr "workspace.layout-grid.editor.top-bar.done")]]])
 
 (mf/defc grid-editor-frame
diff --git a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss
index e9d929f847..26d473689c 100644
--- a/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss
+++ b/frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.scss
@@ -5,6 +5,7 @@
 // Copyright (c) KALEIDOS INC Sucursal en España SL
 
 @use "refactor/common-refactor.scss" as deprecated;
+@use "ds/z-index.scss" as *;
 
 .grid-track-marker {
   .marker-shape {
@@ -123,7 +124,7 @@
   position: absolute;
   top: deprecated.$s-44;
   left: 50%;
-  z-index: deprecated.$z-index-20;
+  z-index: var(--z-index-notifications);
 }
 
 .grid-actions-container {
@@ -148,22 +149,6 @@
   padding-left: deprecated.$s-8;
 }
 
-.locate-btn {
-  @extend %button-secondary;
-
-  text-transform: uppercase;
-  padding: deprecated.$s-8 deprecated.$s-20;
-  font-size: deprecated.$fs-11;
-}
-
-.done-btn {
-  @extend %button-primary;
-
-  text-transform: uppercase;
-  padding: deprecated.$s-8 deprecated.$s-20;
-  font-size: deprecated.$fs-11;
-}
-
 .close-btn {
   @extend %button-tertiary;
 
diff --git a/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs b/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs
index 4f0e8f122d..c92c357d25 100644
--- a/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs
@@ -12,7 +12,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.ds.buttons.button :refer [button*]]
-   [app.main.ui.workspace.viewport.grid-layout-editor :refer [grid-edition-actions]]
+   [app.main.ui.workspace.viewport.grid-layout-editor :refer [grid-edition-actions*]]
    [app.main.ui.workspace.viewport.path-actions :refer [path-actions*]]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
@@ -55,4 +55,4 @@
 
 (mf/defc grid-edition-bar*
   [{:keys [shape]}]
-  [:& grid-edition-actions {:shape shape}])
+  [:> grid-edition-actions* {:shape shape}])