diff --git a/CHANGES.md b/CHANGES.md
index 76fb3e0a9c..2d40b6cacb 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -85,6 +85,7 @@ A non exhaustive list of changes:
 
 - Fix spacing / sizes of different elements in the measurements section of the design tab [Taiga #11076](https://tree.taiga.io/project/penpot/issue/11076)
 - Fix selection of short paths [Github #4472](https://github.com/penpot/penpot/issues/4472)
+- Fix element positioning on the right side to adjust to grid [#11073](https://tree.taiga.io/project/penpot/issue/11073)
 
 ## 2.7.0 (Unreleased)
 
diff --git a/frontend/playwright/ui/specs/variants.spec.js b/frontend/playwright/ui/specs/variants.spec.js
index 9b042341b5..3792f8a425 100644
--- a/frontend/playwright/ui/specs/variants.spec.js
+++ b/frontend/playwright/ui/specs/variants.spec.js
@@ -196,7 +196,7 @@ test("[Bugfixing] User cut paste a variant container into a board, and undo twic
 
   //Create a board
   await workspacePage.boardButton.click();
-  await workspacePage.clickWithDragViewportAt(500, 500, 200, 200);
+  await workspacePage.clickWithDragViewportAt(500, 500, 100, 100);
   await workspacePage.clickAt(495, 495);
   const board = await workspacePage.rootShape.locator("Board");
 
diff --git a/frontend/src/app/main/ui/components/radio_buttons.cljs b/frontend/src/app/main/ui/components/radio_buttons.cljs
index fea5507b1e..53e46834f5 100644
--- a/frontend/src/app/main/ui/components/radio_buttons.cljs
+++ b/frontend/src/app/main/ui/components/radio_buttons.cljs
@@ -62,7 +62,7 @@
   (let [encode-fn (d/nilv encode-fn identity)
         decode-fn (d/nilv decode-fn identity)
         nitems    (if (array? children)
-                    (alength children)
+                    (count (keep identity children))
                     1)
         ;; FIXME: we should handle this with CSS
         width     (mf/with-memo [nitems]
@@ -70,7 +70,7 @@
                       "unset"
                       (fmt/format-pixels
                        (+ (* 4 (- nitems 1))
-                          (* 28 nitems)))))
+                          (* 32 nitems)))))
 
         on-change'
         (mf/use-fn
diff --git a/frontend/src/app/main/ui/components/select.scss b/frontend/src/app/main/ui/components/select.scss
index 68af4ae365..386ba4db4f 100644
--- a/frontend/src/app/main/ui/components/select.scss
+++ b/frontend/src/app/main/ui/components/select.scss
@@ -54,6 +54,7 @@
 
 .dropdown-button {
   @include flexCenter;
+  margin-inline-end: var(--sp-xxs);
   svg {
     @extend .button-icon-small;
     transform: rotate(90deg);
diff --git a/frontend/src/app/main/ui/ds/_sizes.scss b/frontend/src/app/main/ui/ds/_sizes.scss
index dc3af92609..bbfa2f0056 100644
--- a/frontend/src/app/main/ui/ds/_sizes.scss
+++ b/frontend/src/app/main/ui/ds/_sizes.scss
@@ -13,12 +13,16 @@ $sz-32: px2rem(32);
 $sz-36: px2rem(36);
 $sz-40: px2rem(40);
 $sz-48: px2rem(48);
+$sz-80: px2rem(80);
+$sz-88: px2rem(88);
 $sz-160: px2rem(160);
 $sz-200: px2rem(200);
 $sz-224: px2rem(224);
 $sz-252: px2rem(252);
 $sz-284: px2rem(284);
+$sz-318: px2rem(318);
 $sz-352: px2rem(352);
 $sz-400: px2rem(400);
 $sz-480: px2rem(480);
+$sz-500: px2rem(500);
 $sz-964: px2rem(964);
diff --git a/frontend/src/app/main/ui/inspect/attributes.scss b/frontend/src/app/main/ui/inspect/attributes.scss
index 3ae51a85d9..ab7f935d93 100644
--- a/frontend/src/app/main/ui/inspect/attributes.scss
+++ b/frontend/src/app/main/ui/inspect/attributes.scss
@@ -5,6 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @import "refactor/common-refactor.scss";
+@import "../ds/_sizes.scss";
 
 .element-options {
   display: flex;
@@ -19,5 +20,5 @@
 }
 
 .workspace-element-options {
-  height: calc(100vh - #{$s-164}); // TODO: Fix this hardcoded value
+  height: calc(100vh - #{$sz-200}); // TODO: Fix this hardcoded value
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss
index 9dba378304..faa1700dd5 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar.scss
@@ -5,9 +5,10 @@
 // Copyright (c) KALEIDOS INC
 
 @import "refactor/common-refactor.scss";
+@import "../ds/_sizes.scss";
 
-$width-settings-bar: $s-276;
-$width-settings-bar-max: $s-500;
+$width-settings-bar: $sz-318;
+$width-settings-bar-max: $sz-500;
 
 .left-settings-bar {
   display: grid;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.scss b/frontend/src/app/main/ui/workspace/sidebar/options.scss
index 5218381871..f382221a1c 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options.scss
@@ -4,6 +4,7 @@
 //
 // Copyright (c) KALEIDOS INC
 
+@import "../../ds/_sizes.scss";
 @import "refactor/common-refactor.scss";
 
 .tool-window {
@@ -29,7 +30,7 @@
   flex-direction: column;
   gap: $s-8;
   width: 100%;
-  height: calc(100vh - $s-80);
+  height: calc(100vh - $sz-88);
   padding-top: $s-8;
 }
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs
index d91fc97577..c34e757e50 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs
@@ -43,7 +43,7 @@
 
     (when (not  (and disabled-align disabled-distribute))
       [:div {:class (stl/css :align-options)}
-       [:div {:class (stl/css :align-group)}
+       [:div {:class (stl/css :align-group-horizontal)}
         [:button {:class (stl/css-case :align-button true
                                        :disabled disabled-align)
                   :disabled disabled-align
@@ -76,7 +76,7 @@
                   :on-click distribute-objects}
          i/distribute-horizontally]]
 
-       [:div {:class (stl/css :align-group)}
+       [:div {:class (stl/css :align-group-vertical)}
         [:button {:class (stl/css-case :align-button true
                                        :disabled disabled-align)
                   :disabled disabled-align
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss
index f5a14d50e2..a2ec2aafd2 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss
@@ -7,19 +7,31 @@
 @import "refactor/common-refactor.scss";
 
 .align-options {
-  display: flex;
-  gap: $s-4;
+  display: grid;
+  grid-template-columns: repeat(8, var(--sp-xxxl));
+  column-gap: var(--sp-xs);
   height: $s-32;
-  margin: 0 calc(-1 * $s-2);
 }
-.align-group {
-  @include flexRow;
+.align-group-horizontal,
+.align-group-vertical {
+  display: grid;
+  grid-template-columns: subgrid;
+  align-items: center;
+  justify-items: center;
+}
+
+.align-group-horizontal {
+  grid-column: 1 / span 4;
+}
+
+.align-group-vertical {
+  grid-column: 5 / span 4;
 }
 
 .align-button {
   @extend .button-tertiary;
-  height: $s-28;
-  width: $s-28;
+  height: $s-32;
+  width: $s-32;
   padding: 0;
   border-radius: $br-8;
   svg {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
index 44598cdf26..962fb292ff 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
@@ -21,9 +21,12 @@
 }
 
 .first-row {
-  @include flexRow;
-  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(8, var(--sp-xxxl));
+  gap: var(--sp-xs);
+
   .blur-info {
+    grid-column: span 6;
     display: flex;
     align-items: center;
     gap: $s-1;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
index a325143a92..3aedcaa593 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss
@@ -8,9 +8,9 @@
 
 .boolean-options {
   display: grid;
-  grid-template-columns: repeat(8, $s-28);
-  column-gap: $s-4;
-  height: $s-32;
+  grid-template-columns: repeat(8, var(--sp-xxxl));
+  column-gap: var(--sp-xs);
+  height: var(--sp-xxxl);
 }
 
 .bool-group {
@@ -45,4 +45,5 @@
 
 .boolean-radio-btn {
   background-color: transparent;
+  gap: var(--sp-xs);
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss
index 0f9aae670e..1d269b54c5 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss
@@ -16,8 +16,9 @@
 }
 
 .element-set-content {
-  @include flexColumn;
-  margin: $s-4 0 $s-8 0;
+  display: grid;
+  grid-template-columns: repeat(8, var(--sp-xxxl));
+  gap: var(--sp-xs);
 }
 
 .multiple-exports {
@@ -32,18 +33,18 @@
 
 .element-group {
   display: grid;
-  grid-template-columns: repeat(9, 1fr);
-  column-gap: $s-4;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
 }
 
 .input-wrapper {
-  grid-column: span 8;
+  grid-column: span 7;
   display: grid;
   grid-template-columns: subgrid;
 }
 
 .format-select {
-  grid-column: span 3;
+  grid-column: span 2;
   padding: 0;
 
   .dropdown-upwards {
@@ -72,6 +73,6 @@
 .export-btn {
   @extend .button-secondary;
   @include uppercaseTitleTipography;
+  grid-column: 1 / span 8;
   height: $s-32;
-  width: $s-252;
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
index 827c22c601..d2a0bf4caf 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
@@ -21,10 +21,13 @@
 }
 
 .grid-title {
-  @include flexRow;
+  display: grid;
+  grid-template-columns: repeat(8, var(--sp-xxxl));
+  gap: $s-4;
 }
 
 .option-row {
+  grid-column: span 6;
   display: flex;
   align-items: center;
   gap: $s-1;
@@ -45,6 +48,7 @@
     }
   }
   .type-select-wrapper {
+    flex-grow: 1;
     width: $s-96;
     padding: 0;
     border-radius: 0;
@@ -143,6 +147,7 @@
 
 .actions {
   @include flexRow;
+  grid-column: span 2;
 }
 
 .grid-advanced-options {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
index 7e614fa5d2..ed50c6fd66 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
@@ -160,53 +160,52 @@
                      preview-complete?))
         (swap! state* assoc :selected-blend-mode current-blend-mode)))
 
-    [:div {:class (stl/css :element-set)}
-     [:div {:class (stl/css-case :element-set-content true
-                                 :hidden hidden?)}
-      [:div {:class (stl/css :select)}
-       [:& select
-        {:default-value selected-blend-mode
-         :options options
-         :on-change handle-change-blend-mode
-         :is-open? option-highlighted?
-         :class (stl/css-case :hidden-select hidden?)
-         :on-pointer-enter-option handle-blend-mode-enter
-         :on-pointer-leave-option handle-blend-mode-leave}]]
-      [:div {:class (stl/css :input)
-             :title (tr "workspace.options.opacity")}
-       [:span {:class (stl/css :icon)} "%"]
-       [:> numeric-input*
-        {:value current-opacity
-         :placeholder "--"
-         :on-change handle-opacity-change
-         :min 0
-         :max 100
-         :className (stl/css :numeric-input)}]]
+    [:div {:class (stl/css-case :element-set-content true
+                                :hidden hidden?)}
+     [:div {:class (stl/css :select)}
+      [:& select
+       {:default-value selected-blend-mode
+        :options options
+        :on-change handle-change-blend-mode
+        :is-open? option-highlighted?
+        :class (stl/css-case :hidden-select hidden?)
+        :on-pointer-enter-option handle-blend-mode-enter
+        :on-pointer-leave-option handle-blend-mode-leave}]]
+     [:div {:class (stl/css :input)
+            :title (tr "workspace.options.opacity")}
+      [:span {:class (stl/css :icon)} "%"]
+      [:> numeric-input*
+       {:value current-opacity
+        :placeholder "--"
+        :on-change handle-opacity-change
+        :min 0
+        :max 100
+        :className (stl/css :numeric-input)}]]
 
 
-      [:div {:class (stl/css :actions)}
-       (cond
-         (or (= :multiple hidden?) (not hidden?))
-         [:> icon-button* {:variant "ghost"
-                           :aria-label (tr "workspace.options.layer-options.toggle-layer")
-                           :on-click handle-set-hidden
-                           :icon "shown"}]
+     [:div {:class (stl/css :actions)}
+      (cond
+        (or (= :multiple hidden?) (not hidden?))
+        [:> icon-button* {:variant "ghost"
+                          :aria-label (tr "workspace.options.layer-options.toggle-layer")
+                          :on-click handle-set-hidden
+                          :icon "shown"}]
 
-         :else
-         [:> icon-button* {:variant "ghost"
-                           :aria-label (tr "workspace.options.layer-options.toggle-layer")
-                           :on-click handle-set-visible
-                           :icon "hide"}])
+        :else
+        [:> icon-button* {:variant "ghost"
+                          :aria-label (tr "workspace.options.layer-options.toggle-layer")
+                          :on-click handle-set-visible
+                          :icon "hide"}])
 
-       (cond
-         (or (= :multiple blocked?) (not blocked?))
-         [:> icon-button* {:variant "ghost"
-                           :aria-label (tr "workspace.shape.menu.lock")
-                           :on-click handle-set-blocked
-                           :icon "unlock"}]
+      (cond
+        (or (= :multiple blocked?) (not blocked?))
+        [:> icon-button* {:variant "ghost"
+                          :aria-label (tr "workspace.shape.menu.lock")
+                          :on-click handle-set-blocked
+                          :icon "unlock"}]
 
-         :else
-         [:> icon-button* {:variant "ghost"
-                           :aria-label (tr "workspace.shape.menu.unlock")
-                           :on-click handle-set-unblocked
-                           :icon "lock"}])]]]))
+        :else
+        [:> icon-button* {:variant "ghost"
+                          :aria-label (tr "workspace.shape.menu.unlock")
+                          :on-click handle-set-unblocked
+                          :icon "lock"}])]]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss
index e72531e0e3..33b93f308d 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss
@@ -6,25 +6,25 @@
 
 @import "refactor/common-refactor.scss";
 
-.element-set {
-  margin-bottom: $s-8;
-}
 .element-set-content {
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(8, var(--sp-xxxl));
+  gap: var(--sp-xs);
   height: $s-32;
-  gap: $s-4;
+  margin-bottom: $s-8;
   .select {
-    width: $s-124;
+    grid-column: span 4;
     padding: 0;
   }
   .input {
     @extend .input-element;
     @include bodySmallTypography;
-    width: $s-60;
+    grid-column: span 2;
   }
   .actions {
-    display: flex;
-    gap: $s-4;
+    grid-column: span 2;
+    display: grid;
+    grid-template-columns: subgrid;
   }
 
   &.hidden {
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 476e1f120d..48b131ddb2 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
@@ -162,7 +162,8 @@
   {::mf/props :obj
    ::mf/private true}
   [{:keys [value on-change]}]
-  [:& radio-buttons {:selected (d/name value)
+  [:& radio-buttons {:class (stl/css :direction-row-flex)
+                     :selected (d/name value)
                      :decode-fn keyword
                      :on-change on-change
                      :name "flex-direction"}
@@ -197,7 +198,8 @@
 (mf/defc align-row
   {::mf/props :obj}
   [{:keys [is-column value on-change]}]
-  [:& radio-buttons {:selected (d/name value)
+  [:& radio-buttons {:class (stl/css :align-row)
+                     :selected (d/name value)
                      :decode-fn keyword
                      :on-change on-change
                      :name "flex-align-items"}
@@ -217,7 +219,8 @@
 (mf/defc align-content-row
   {::mf/props :obj}
   [{:keys [is-column value on-change]}]
-  [:& radio-buttons {:selected (d/name value)
+  [:& radio-buttons {:class (stl/css :align-content-row)
+                     :selected (d/name value)
                      :decode-fn keyword
                      :on-change on-change
                      :name "flex-align-content"}
@@ -249,7 +252,8 @@
 (mf/defc justify-content-row
   {::mf/props :obj}
   [{:keys [is-column justify-content on-change]}]
-  [:& radio-buttons {:selected (d/name justify-content)
+  [:& radio-buttons {:class (stl/css :justify-content-row)
+                     :selected (d/name justify-content)
                      :on-change on-change
                      :name "flex-justify"}
    [:& radio-button {:value "start"
@@ -582,7 +586,8 @@
 (mf/defc direction-row-grid
   {::mf/props :obj}
   [{:keys [value on-change] :as props}]
-  [:& radio-buttons {:selected (d/name value)
+  [:& radio-buttons {:class (stl/css :direction-row-grid)
+                     :selected (d/name value)
                      :decode-fn keyword
                      :on-change on-change
                      :name "grid-direction"}
@@ -619,7 +624,8 @@
    ::mf/private true}
   [{:keys [is-column value on-change]}]
   (let [type (if ^boolean is-column "column" "row")]
-    [:& radio-buttons {:selected (d/name value)
+    [:& radio-buttons {:class (stl/css :align-grid-row)
+                       :selected (d/name value)
                        :decode-fn keyword
                        :on-change on-change
                        :name (dm/str "flex-align-items-" type)}
@@ -641,7 +647,8 @@
    ::mf/private :obj}
   [{:keys [is-column value on-change]}]
   (let [type (if ^boolean is-column "column" "row")]
-    [:& radio-buttons {:selected (d/name value)
+    [:& radio-buttons {:class (stl/css :justify-grid-row)
+                       :selected (d/name value)
                        :on-change on-change
                        :decode-fn keyword
                        :name (dm/str "grid-justify-items-" type)}
@@ -1103,7 +1110,7 @@
                                :on-click open-grid-help
                                :icon "help"}]])
 
-          [:div {:class (stl/css :row :first-row)}
+          [:div {:class (stl/css :first-row)}
            [:div {:class (stl/css :direction-edit)}
             [:div {:class (stl/css :direction)}
              [:& direction-row-grid {:value saved-grid-dir
@@ -1124,10 +1131,10 @@
                                  :value grid-justify-content-row
                                  :on-change on-row-justify-change}]]
 
-          [:div {:class (stl/css :row)}
+          [:div {:class (stl/css :gap-row)}
            [:& gap-section {:on-change on-gap-change
                             :value (:layout-gap values)}]]
-          [:div {:class (stl/css :row :padding-section)}
+          [:div {:class (stl/css :padding-row)}
            [:& padding-section {:value (:layout-padding values)
                                 :type (:layout-padding-type values)
                                 :on-type-change on-padding-type-change
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 6c69d3d309..9287f6bd7b 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
@@ -30,17 +30,31 @@
     }
   }
   .flex-layout-menu {
+    display: grid;
+    grid-template-columns: repeat(8, var(--sp-xxxl));
+    gap: var(--sp-xs);
     margin-bottom: $s-8;
+
     .first-row {
-      display: flex;
-      gap: $s-4;
+      grid-column: 1 / -1;
+      display: grid;
+      grid-template-columns: subgrid;
       margin-bottom: $s-12;
       margin-top: $s-4;
+
+      .align-row {
+        grid-column: span 3;
+      }
+
+      .direction-row-flex {
+        grid-column: span 4;
+      }
+
       .wrap-button {
         @extend .button-tertiary;
         border-radius: $br-8;
         height: $s-32;
-        width: $s-28;
+        width: $s-32;
         svg {
           @extend .button-icon;
           stroke: var(--icon-foreground);
@@ -52,12 +66,25 @@
     }
     .second-row,
     .third-row {
+      grid-column: 1 / -1;
+      display: grid;
+      grid-template-columns: subgrid;
       margin-bottom: $s-12;
+
+      .align-content-row,
+      .justify-content-row {
+        grid-column: span 6;
+      }
     }
     .forth-row {
-      @include flexColumn;
+      display: grid;
+      --input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - var(--sp-xs) / 2);
+      grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
+      gap: var(--sp-xs);
+      grid-column: 1 / -1;
     }
     .help-button-wrapper {
+      grid-column: 1 / -1;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
@@ -66,12 +93,12 @@
 }
 
 .gap-group {
-  display: flex;
-  gap: $s-4;
+  grid-column: span 3;
+  display: grid;
+  grid-template-columns: subgrid;
   .column-gap {
     @extend .input-element;
     @include bodySmallTypography;
-    width: $s-108;
     &.disabled {
       @extend .disabled-input;
     }
@@ -79,7 +106,6 @@
   .row-gap {
     @extend .input-element;
     @include bodySmallTypography;
-    width: $s-108;
     &.disabled {
       @extend .disabled-input;
     }
@@ -87,41 +113,43 @@
 }
 
 .padding-group {
-  display: flex;
-  gap: $s-4;
+  display: grid;
+  grid-column: span 3;
+  grid-template-columns: subgrid;
 
   .padding-inputs {
-    display: flex;
-    gap: $s-4;
+    grid-column: span 2;
+    display: grid;
+    grid-template-columns: subgrid;
   }
 
   .paddings-simple {
-    display: flex;
-    gap: $s-4;
+    display: grid;
+    grid-column: span 2;
+    grid-template-columns: subgrid;
 
     .padding-simple {
       @extend .input-element;
       @include bodySmallTypography;
-      max-width: $s-108;
     }
   }
 
   .paddings-multiple {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: $s-4;
+    grid-column: span 2;
+    grid-template-columns: subgrid;
+    gap: var(--sp-xs);
 
     .padding-multiple {
       @extend .input-element;
       @include bodySmallTypography;
-      max-width: $s-108;
     }
   }
 
   .padding-toggle {
     @extend .button-tertiary;
     height: $s-32;
-    width: $s-28;
+    width: $s-32;
     border-radius: $br-8;
     svg {
       @extend .button-icon;
@@ -134,22 +162,30 @@
 }
 
 .grid-layout-menu {
-  @include flexColumn;
-  gap: $s-8;
+  display: grid;
+  grid-template-columns: repeat(8, var(--sp-xxxl));
+  gap: var(--sp-xs);
 
-  .row {
-    @include flexRow;
+  .edit-grid-wrapper,
+  .first-row,
+  .grid-layout-align,
+  .gap-row,
+  .padding-row {
+    grid-column: 1 / -1;
   }
 
   .first-row {
     margin-bottom: $s-8;
+    display: grid;
+    grid-template-columns: subgrid;
   }
 
   .grid-layout-align {
-    @include flexColumn;
-    gap: $s-4;
+    display: grid;
+    grid-template-columns: subgrid;
     align-items: flex-start;
     position: relative;
+    gap: var(--sp-xs);
 
     .locate-button {
       position: absolute;
@@ -169,6 +205,7 @@
     @include uppercaseTitleTipography;
     width: 100%;
     padding: $s-8;
+    grid-column: span 7;
   }
 
   .exit-btn {
@@ -193,7 +230,8 @@
   }
 
   .edit-grid-wrapper {
-    @include flexRow;
+    display: grid;
+    grid-template-columns: subgrid;
   }
 }
 
@@ -324,3 +362,23 @@
     }
   }
 }
+
+.direction-edit {
+  grid-column: span 2;
+}
+
+.align-grid-row {
+  grid-column: span 3;
+}
+
+.justify-grid-row {
+  grid-column: 1 / span 6;
+}
+
+.gap-row,
+.padding-row {
+  display: grid;
+  --input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - var(--sp-xs) / 2);
+  grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
+  gap: var(--sp-xs);
+}
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 0c7f4eb0d9..8b81bdba8e 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
@@ -230,7 +230,6 @@
     {:selected  (d/name value)
      :decode-fn keyword
      :on-change on-change
-     :wide      true
      :name      "flex-behaviour-h"}
 
     [:& radio-button
@@ -265,7 +264,6 @@
     {:selected  (d/name value)
      :decode-fn keyword
      :on-change on-change
-     :wide      true
      :name      "flex-behaviour-v"}
 
     [:& radio-button
@@ -451,7 +449,7 @@
      (when open?
        [:div {:class (stl/css :flex-element-menu)}
         (when (or is-layout-child? is-absolute?)
-          [:div {:class (stl/css :row)}
+          [:div {:class (stl/css :position-row)}
            [:div {:class (stl/css :position-options)}
             [:& radio-buttons {:selected (if is-absolute? "absolute" "static")
                                :decode-fn keyword
@@ -475,7 +473,7 @@
               :nillable true
               :value (:layout-item-z-index values)}]]])
 
-        [:div {:class (stl/css :row)}
+        [:div {:class (stl/css :behavior-row)}
          [:div {:class (stl/css-case
                         :behaviour-menu true
                         :wrap (and ^boolean is-layout-child?
@@ -492,85 +490,83 @@
             :on-change on-behaviour-v-change}]]]
 
         (when (and is-layout-child? is-flex-parent?)
-          [:div {:class (stl/css :row)}
+          [:div {:class (stl/css :align-row)}
            [:& align-self-row {:is-col is-col?
                                :value align-self
                                :on-change on-align-self-change}]])
 
         (when is-layout-child?
-          [:div {:class (stl/css :row)}
-           [:> margin-section* {:value (:layout-item-margin values)
-                                :type (:layout-item-margin-type values)
-                                :on-type-change on-margin-type-change
-                                :on-change on-margin-change}]])
+          [:> margin-section* {:value (:layout-item-margin values)
+                               :type (:layout-item-margin-type values)
+                               :on-type-change on-margin-type-change
+                               :on-change on-margin-change}])
 
         (when (or (= h-sizing :fill)
                   (= v-sizing :fill))
-          [:div {:class (stl/css :row)}
-           [:div {:class (stl/css :advanced-options)}
-            (when (= (:layout-item-h-sizing values) :fill)
-              [:div {:class (stl/css :horizontal-fill)}
-               [:div {:class (stl/css :layout-item-min-w)
-                      :title (tr "workspace.options.layout-item.layout-item-min-w")}
+          [:div {:class (stl/css :advanced-options)}
+           (when (= (:layout-item-h-sizing values) :fill)
+             [:div {:class (stl/css :horizontal-fill)}
+              [:div {:class (stl/css :layout-item-min-w)
+                     :title (tr "workspace.options.layout-item.layout-item-min-w")}
 
-                [:span {:class (stl/css :icon-text)} "MIN W"]
-                [:> numeric-input*
-                 {:class (stl/css :numeric-input)
-                  :no-validate true
-                  :min 0
-                  :data-wrap true
-                  :placeholder "--"
-                  :data-attr "layout-item-min-w"
-                  :on-focus dom/select-target
-                  :on-change on-size-change
-                  :value (get values :layout-item-min-w)
-                  :nillable true}]]
+               [:span {:class (stl/css :icon-text)} "MIN W"]
+               [:> numeric-input*
+                {:class (stl/css :numeric-input)
+                 :no-validate true
+                 :min 0
+                 :data-wrap true
+                 :placeholder "--"
+                 :data-attr "layout-item-min-w"
+                 :on-focus dom/select-target
+                 :on-change on-size-change
+                 :value (get values :layout-item-min-w)
+                 :nillable true}]]
 
-               [:div {:class (stl/css :layout-item-max-w)
-                      :title (tr "workspace.options.layout-item.layout-item-max-w")}
-                [:span {:class (stl/css :icon-text)} "MAX W"]
-                [:> numeric-input*
-                 {:class (stl/css :numeric-input)
-                  :no-validate true
-                  :min 0
-                  :data-wrap true
-                  :placeholder "--"
-                  :data-attr "layout-item-max-w"
-                  :on-focus dom/select-target
-                  :on-change on-size-change
-                  :value (get values :layout-item-max-w)
-                  :nillable true}]]])
+              [:div {:class (stl/css :layout-item-max-w)
+                     :title (tr "workspace.options.layout-item.layout-item-max-w")}
+               [:span {:class (stl/css :icon-text)} "MAX W"]
+               [:> numeric-input*
+                {:class (stl/css :numeric-input)
+                 :no-validate true
+                 :min 0
+                 :data-wrap true
+                 :placeholder "--"
+                 :data-attr "layout-item-max-w"
+                 :on-focus dom/select-target
+                 :on-change on-size-change
+                 :value (get values :layout-item-max-w)
+                 :nillable true}]]])
 
-            (when (= v-sizing :fill)
-              [:div {:class (stl/css :vertical-fill)}
-               [:div {:class (stl/css :layout-item-min-h)
-                      :title (tr "workspace.options.layout-item.layout-item-min-h")}
+           (when (= v-sizing :fill)
+             [:div {:class (stl/css :vertical-fill)}
+              [:div {:class (stl/css :layout-item-min-h)
+                     :title (tr "workspace.options.layout-item.layout-item-min-h")}
 
-                [:span {:class (stl/css :icon-text)} "MIN H"]
-                [:> numeric-input*
-                 {:class (stl/css :numeric-input)
-                  :no-validate true
-                  :min 0
-                  :data-wrap true
-                  :placeholder "--"
-                  :data-attr "layout-item-min-h"
-                  :on-focus dom/select-target
-                  :on-change on-size-change
-                  :value (get values :layout-item-min-h)
-                  :nillable true}]]
+               [:span {:class (stl/css :icon-text)} "MIN H"]
+               [:> numeric-input*
+                {:class (stl/css :numeric-input)
+                 :no-validate true
+                 :min 0
+                 :data-wrap true
+                 :placeholder "--"
+                 :data-attr "layout-item-min-h"
+                 :on-focus dom/select-target
+                 :on-change on-size-change
+                 :value (get values :layout-item-min-h)
+                 :nillable true}]]
 
-               [:div {:class (stl/css :layout-item-max-h)
-                      :title (tr "workspace.options.layout-item.layout-item-max-h")}
+              [:div {:class (stl/css :layout-item-max-h)
+                     :title (tr "workspace.options.layout-item.layout-item-max-h")}
 
-                [:span {:class (stl/css :icon-text)} "MAX H"]
-                [:> numeric-input*
-                 {:class (stl/css :numeric-input)
-                  :no-validate true
-                  :min 0
-                  :data-wrap true
-                  :placeholder "--"
-                  :data-attr "layout-item-max-h"
-                  :on-focus dom/select-target
-                  :on-change on-size-change
-                  :value (get values :layout-item-max-h)
-                  :nillable true}]]])]])])]))
+               [:span {:class (stl/css :icon-text)} "MAX H"]
+               [:> numeric-input*
+                {:class (stl/css :numeric-input)
+                 :no-validate true
+                 :min 0
+                 :data-wrap true
+                 :placeholder "--"
+                 :data-attr "layout-item-max-h"
+                 :on-focus dom/select-target
+                 :on-change on-size-change
+                 :value (get values :layout-item-max-h)
+                 :nillable true}]]])])])]))
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 475c2cb370..eaa53011db 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
@@ -19,68 +19,60 @@
 }
 
 .flex-element-menu {
-  @include flexColumn;
-  gap: $s-12;
-  margin-block-end: $s-8;
+  display: grid;
+  grid-template-columns: repeat(8, var(--sp-xxxl));
+  gap: var(--sp-xs);
 }
 
 .behaviour-menu {
-  display: flex;
-  gap: $s-4;
-}
-
-.horizontal-behaviour {
-  &.one-element {
-    width: $s-28;
-  }
-  &.two-element {
-    width: $s-60;
-  }
-  &.three-element {
-    width: $s-92;
-  }
+  display: grid;
+  column-gap: var(--sp-xs);
+  grid-template-columns: auto auto;
 }
 
 .vertical-behaviour {
   .rotated {
     transform: rotate(90deg);
   }
-  &.one-element {
-    width: $s-28;
-  }
-  &.two-element {
-    width: $s-60;
-  }
-  &.three-element {
-    width: $s-92;
-  }
 }
 
 .z-index-wrapper {
   @extend .input-element;
   @include bodySmallTypography;
-  width: $s-60;
+  grid-column: 6 / span 3;
 }
 
 .row {
   display: flex;
-  gap: $s-4;
+  gap: var(--sp-xs);
+}
+
+.position-row,
+.behavior-row,
+.align-row,
+.margin-row {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
 }
 
 .position-options {
-  width: $s-188;
+  width: 100%;
+  grid-column: 1 / span 5;
 }
 
 .margin-row {
-  display: flex;
-  align-items: flex-start;
-  gap: $s-4;
+  display: grid;
+  // NOTE: this does not follow the 8-column grid and the size is not normalized,
+  --input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - var(--sp-xs) / 2);
+  grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
+  gap: var(--sp-xs);
 }
 
 .margin-mode {
   @extend .button-tertiary;
+  grid-column: 3;
   height: $s-32;
-  width: $s-28;
   svg {
     @extend .button-icon;
   }
@@ -90,20 +82,26 @@
 }
 
 .margin-simple {
-  display: flex;
-  gap: $s-4;
+  display: grid;
+  gap: var(--sp-xs);
+  grid-template-columns: subgrid;
   .vertical-margin,
   .horizontal-margin {
     @extend .input-element;
     @include bodySmallTypography;
-    width: $s-108;
+  }
+  .vertical-margin {
+    grid-column: 1;
+  }
+  .horizontal-margin {
+    grid-column: 2;
   }
 }
 
 .margin-multiple {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: $s-4;
+  grid-template-columns: subgrid;
+  gap: var(--sp-xs);
 }
 
 .top-margin,
@@ -112,17 +110,40 @@
 .right-margin {
   @extend .input-element;
   @include bodySmallTypography;
-  width: $s-108;
+}
+
+.top-margin {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.bottom-margin {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.left-margin {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+.right-margin {
+  grid-column: 2;
+  grid-row: 2;
 }
 
 .advanced-options {
-  @include flexColumn;
+  display: grid;
+  --input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - var(--sp-xs) / 2);
+  grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
+  gap: var(--sp-xs);
 }
 
 .horizontal-fill,
 .vertical-fill {
-  display: flex;
-  gap: $s-4;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
 }
 
 .layout-item-min-w,
@@ -131,10 +152,13 @@
 .layout-item-max-h {
   @extend .input-element;
   @include bodySmallTypography;
-  width: $s-108;
   .icon-text {
     justify-content: flex-start;
     width: $s-80;
     padding-top: $s-2;
   }
 }
+
+.inputs-wrapper {
+  grid-column: 1 / span 2;
+}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
index 20e51d1097..86d9781c80 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
@@ -8,26 +8,24 @@
 
 .element-set {
   display: grid;
-  row-gap: var(--sp-xs);
   margin-bottom: var(--sp-s);
   // NOTE: this does not follow the 8-column grid and the size is not normalized,
-  // so we need to hardcode this width :(
-  --input-width: calc(var(--sp-xxxl) * 3.5 - 2 * var(--sp-xs));
+  --input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - var(--sp-xs) / 2);
   grid-template-columns: var(--input-width) var(--input-width) var(--sp-xxxl);
-  column-gap: var(--sp-xs);
+  gap: var(--sp-xs);
 }
 
 .presets {
   display: grid;
-  grid-column: 1 / -1;
   grid-template-columns: repeat(8, var(--sp-xxxl));
-  gap: $s-4;
+  gap: var(--sp-xs);
+  grid-column: 1 / -1;
 }
 
 .presets-wrapper {
   @extend .asset-element;
   position: relative;
-  grid-column: span 4;
+  grid-column: span 5;
   display: flex;
   height: $s-32;
   padding: $s-8;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
index 4554248b1a..67ac4c5226 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
@@ -196,7 +196,8 @@
                                :on-change on-update-offset-y
                                :value (:offset-y shadow)}]]
 
-          [:> color-row* {:color (:color shadow)
+          [:> color-row* {:class (stl/css :shadow-color)
+                          :color (:color shadow)
                           :title (tr "workspace.options.shadow-options.color")
                           :disable-gradient true
                           :disable-image true
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss
index e7f2a692c0..e35ca33f16 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss
@@ -30,7 +30,9 @@
 }
 
 .actions {
-  @include flexRow;
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: span 2;
 }
 
 .shadow-element {
@@ -53,14 +55,17 @@
 }
 
 .basic-options {
-  @include flexRow;
+  display: grid;
+  grid-template-columns: repeat(8, var(--sp-xxxl));
+  gap: var(--sp-xs);
 }
 
 .shadow-info {
+  grid-column: span 6;
   display: flex;
   align-items: center;
   gap: $s-1;
-  width: $s-188;
+
   .more-options {
     @extend .button-secondary;
     height: $s-32;
@@ -102,34 +107,46 @@
 }
 
 .shadow-advanced-options {
-  @include flexColumn;
-  width: $sz-252;
+  display: grid;
+  grid-template-columns: repeat(8, var(--sp-xxxl));
+  gap: var(--sp-xs);
 }
 
 .first-row,
 .second-row {
-  @include flexRow;
-  .offset-x-input,
-  .blur-input,
-  .spread-input,
-  .offset-y-input {
-    @extend .input-element;
-    @include bodySmallTypography;
-    width: $s-60;
-    min-width: $s-60;
-    align-items: baseline;
-    input {
-      width: $s-32;
-    }
-  }
-  .blur-input,
-  .spread-input {
-    width: $s-92;
-    .input-label {
-      width: $s-44;
-    }
-  }
-  .spread-input {
-    gap: $s-8;
-  }
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+}
+
+.offset-x-input,
+.blur-input,
+.spread-input,
+.offset-y-input {
+  @extend .input-element;
+  @include bodySmallTypography;
+}
+
+.input-label {
+  width: $sz-48;
+}
+
+.offset-x-input {
+  grid-column: span 2;
+}
+
+.offset-y-input {
+  grid-column: span 2;
+}
+
+.blur-input {
+  grid-column: span 3;
+}
+
+.spread-input {
+  grid-column: span 3;
+}
+
+.shadow-color {
+  grid-column: span 6;
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
index b86a972dfb..d02bfdf437 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
@@ -45,7 +45,7 @@
   (if (= v :multiple) nil v))
 
 (mf/defc color-row*
-  [{:keys [index color disable-gradient disable-opacity disable-image disable-picker hidden
+  [{:keys [index color class disable-gradient disable-opacity disable-image disable-picker hidden
            on-change on-reorder on-detach on-open on-close on-remove
            disable-drag on-focus on-blur select-only select-on-focus]}]
   (let [libraries        (mf/deref refs/files)
@@ -68,6 +68,8 @@
         editing-text*    (mf/use-state false)
         editing-text?    (deref editing-text*)
 
+        class            (if (some? class) (dm/str class " ") "")
+
         opacity?
         (and (not multiple-colors?)
              (not library-color?)
@@ -187,11 +189,13 @@
       (when (and (not disable-picker) (not= prev-color color))
         (modal/update-props! :colorpicker {:data (parse-color color)})))
 
-    [:div {:class (stl/css-case
-                   :color-data true
-                   :hidden hidden
-                   :dnd-over-top (= (:over dprops) :top)
-                   :dnd-over-bot (= (:over dprops) :bot))}
+    [:div {:class (dm/str
+                   class
+                   (stl/css-case
+                    :color-data true
+                    :hidden hidden
+                    :dnd-over-top (= (:over dprops) :top)
+                    :dnd-over-bot (= (:over dprops) :bot)))}
 
      ;; Drag handler
      (when (some? on-reorder)
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
index f61de27609..aba49dbcbc 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
@@ -176,7 +176,7 @@
          :select-on-focus select-on-focus
          :on-blur on-blur}]]
 
-      [:div {:class (stl/css :select-wrapper)
+      [:div {:class (stl/css :select-wrapper :stroke-alignment-select)
              :data-testid "stroke.alignment"}
        [:& select
         {:default-value stroke-alignment
@@ -184,7 +184,7 @@
          :on-change on-alignment-change}]]
 
       (when-not disable-stroke-style
-        [:div {:class (stl/css :select-wrapper)
+        [:div {:class (stl/css :select-wrapper :stroke-style-select)
                :data-testid "stroke.style"}
          [:& select
           {:default-value stroke-style
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss
index 0a9cda6b9b..fc2579a70e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss
@@ -29,24 +29,30 @@
 .stroke-options {
   display: grid;
   align-items: center;
-  gap: $s-4;
-  grid-template-columns: 1fr 2fr 2fr;
+  grid-template-columns: repeat(8, var(--sp-xxxl));
+  gap: var(--sp-xs);
 
   .stroke-width-input-element {
     @extend .input-element;
     @include bodySmallTypography;
+    grid-column: span 2;
+  }
+
+  .stroke-alignment-select {
+    grid-column: span 3;
+  }
+
+  .stroke-style-select {
+    grid-column: span 3;
   }
 }
 .stroke-caps-options {
   display: grid;
-  align-items: center;
-  gap: $s-4;
-  grid-template-columns: 1fr auto 1fr;
+  --input-width: calc(var(--sp-xxxl) * 3.5 + 3 * var(--sp-xs) - var(--sp-xs) / 2);
+  grid-template-columns: var(--input-width) var(--sp-xxxl) var(--input-width);
+  gap: var(--sp-xs);
 }
 
-.cap-select {
-  width: 100%;
-}
 .stroke-cap-dropdown,
 .stroke-cap-dropdown-start {
   min-width: $s-124;
@@ -62,8 +68,8 @@
 }
 .swap-caps-btn {
   @extend .button-secondary;
-  height: $s-32;
-  width: $s-28;
+  height: var(--sp-xxxl);
+  width: var(--sp-xxxl);
   svg {
     @extend .button-icon;
   }