diff --git a/frontend/src/app/main/ui/components/reorder_handler.cljs b/frontend/src/app/main/ui/components/reorder_handler.cljs
new file mode 100644
index 000000000..8f4acfe32
--- /dev/null
+++ b/frontend/src/app/main/ui/components/reorder_handler.cljs
@@ -0,0 +1,23 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.components.reorder-handler
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as ic]
+   [rumext.v2 :as mf]))
+
+(mf/defc reorder-handler
+  {::mf/forward-ref true}
+  [_ ref]
+  [:*
+   [:div {:ref ref :class (stl/css :reorder)}
+    [:> icon*
+     {:id ic/reorder
+      :class (stl/css :reorder-icon)
+      :aria-hidden true}]]
+   [:hr {:class (stl/css :reorder-separator-top)}]
+   [:hr {:class (stl/css :reorder-separator-bottom)}]])
diff --git a/frontend/src/app/main/ui/components/reorder_handler.scss b/frontend/src/app/main/ui/components/reorder_handler.scss
new file mode 100644
index 000000000..692a24c15
--- /dev/null
+++ b/frontend/src/app/main/ui/components/reorder_handler.scss
@@ -0,0 +1,42 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+.reorder {
+  cursor: grab;
+  display: flex;
+  flex-direction: column;
+  height: calc(100% + var(--sp-m));
+  justify-content: center;
+  left: var(--reorder-left-position, calc(-1 * var(--sp-l)));
+  position: absolute;
+  top: calc(-1 * (var(--sp-m) / 2));
+  z-index: var(--z-index-panels);
+}
+
+.reorder-icon {
+  height: var(--sp-l);
+  pointer-events: none;
+  visibility: var(--reorder-icon-visibility, hidden);
+  --icon-stroke-color: var(--color-foreground-secondary);
+}
+
+.reorder-separator-top,
+.reorder-separator-bottom {
+  border-color: var(--color-accent-primary);
+  margin: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.reorder-separator-top {
+  display: var(--reorder-top-display, none);
+  top: calc(-1 * var(--sp-xxs));
+}
+
+.reorder-separator-bottom {
+  display: var(--reorder-bottom-display, none);
+  bottom: calc(-1 * var(--sp-xxs));
+}
diff --git a/frontend/src/app/main/ui/ds/_sizes.scss b/frontend/src/app/main/ui/ds/_sizes.scss
index 5301f6b44..83f573218 100644
--- a/frontend/src/app/main/ui/ds/_sizes.scss
+++ b/frontend/src/app/main/ui/ds/_sizes.scss
@@ -14,5 +14,7 @@ $sz-36: px2rem(36);
 $sz-160: px2rem(160);
 $sz-200: px2rem(200);
 $sz-224: px2rem(224);
+$sz-252: px2rem(252);
+$sz-284: px2rem(284);
 $sz-400: px2rem(400);
 $sz-964: px2rem(964);
diff --git a/frontend/src/app/main/ui/ds/foundations/assets/icon.scss b/frontend/src/app/main/ui/ds/foundations/assets/icon.scss
index 7430a0c31..afc37923d 100644
--- a/frontend/src/app/main/ui/ds/foundations/assets/icon.scss
+++ b/frontend/src/app/main/ui/ds/foundations/assets/icon.scss
@@ -5,6 +5,6 @@
 // Copyright (c) KALEIDOS INC
 
 .icon {
-  fill: none;
-  stroke: currentColor;
+  fill: var(--icon-fill-color, none);
+  stroke: var(--icon-stroke-color, currentColor);
 }
diff --git a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
index 1f1f8cf89..e2ec5025f 100644
--- a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
@@ -29,6 +29,7 @@
   display: flex;
   flex-direction: column;
   gap: $s-8;
+  padding-left: var(--sp-m);
 }
 
 .shape-row {
@@ -98,5 +99,6 @@
 }
 
 .viewer-tab-switcher {
+  --tabs-nav-padding-inline-start: 0;
   --tabs-nav-padding-inline-end: var(--sp-m);
 }
diff --git a/frontend/src/app/main/ui/workspace/colorpicker.scss b/frontend/src/app/main/ui/workspace/colorpicker.scss
index 0c9486c1a..5b640bc38 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker.scss
@@ -5,19 +5,22 @@
 // Copyright (c) KALEIDOS INC
 
 @import "refactor/common-refactor.scss";
+@import "../ds/_sizes.scss";
 
 .colorpicker-tooltip {
   @extend .modal-background;
   left: calc(10 * $s-140);
   width: auto;
+  padding: var(--sp-m) 0;
+  width: $sz-284;
 }
 
 .colorpicker {
   border-radius: $br-8;
-  width: $s-260;
-  & > * {
-    width: $s-260;
-  }
+}
+
+.colorpicker-tabs {
+  padding: 0 var(--sp-m);
 }
 
 .top-actions {
@@ -26,6 +29,7 @@
   flex-direction: row-reverse;
   justify-content: space-between;
   height: $s-40;
+  padding: 0 var(--sp-m);
 }
 
 .top-actions-right {
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss b/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss
index b6d52d649..349da89a7 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss
@@ -9,6 +9,7 @@
 .color-values {
   @include flexColumn;
   margin-top: $s-8;
+  padding: 0 var(--sp-m);
 
   &.disable-opacity {
     grid-template-columns: 3.5rem repeat(3, 1fr);
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
index 54134f6aa..e45325cc4 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
+++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.cljs
@@ -12,9 +12,9 @@
    [app.common.data.macros :as dm]
    [app.common.math :as mth]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
+   [app.main.ui.components.reorder-handler :refer [reorder-handler]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
-   [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.formats :as fmt]
    [app.main.ui.hooks :as h]
    [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
@@ -140,14 +140,7 @@
                                 :dnd-over-top (= (:over dprops) :top)
                                 :dnd-over-bot (= (:over dprops) :bot))}
 
-     [:div {:ref dref
-            :class (stl/css :reorder)}
-      [:> icon*
-       {:id i/reorder
-        :class (stl/css :reorder-icon)
-        :aria-hidden true}]]
-     [:hr {:class (stl/css :reorder-separator-top)}]
-     [:hr {:class (stl/css :reorder-separator-bottom)}]
+     [:& reorder-handler {:ref dref}]
 
      [:div {:class (stl/css :offset-input-wrapper)}
       [:span {:class (stl/css :icon-text)} "%"]
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss b/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
index 5147a8225..8bd5b81c4 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/gradients.scss
@@ -18,8 +18,8 @@
   height: 100%;
   display: flex;
   align-items: center;
-  padding: $s-12;
   position: relative;
+  padding: 0 var(--sp-m);
 }
 
 .gradient-background {
@@ -89,6 +89,7 @@
 .gradient-options {
   display: flex;
   justify-content: space-between;
+  padding: 0 var(--sp-m);
 }
 
 .gradient-options-buttons {
@@ -110,7 +111,7 @@
   max-height: $s-180;
   overflow-y: auto;
   overflow-x: hidden;
-  padding: $s-1 0;
+  padding: 0 0 var(--sp-s) var(--sp-m);
 }
 
 .gradient-stops-entry {
@@ -120,60 +121,23 @@
   border-radius: $br-12;
   border: $s-1 solid transparent;
 
-  &:hover .reorder-icon {
-    visibility: visible;
-  }
+  position: relative;
 
   &.is-selected {
     border-color: var(--color-accent-primary-muted);
   }
 
-  &.dnd-over-top .reorder-separator-top {
-    display: block;
+  &:hover {
+    --reorder-icon-visibility: visible;
   }
 
-  &.dnd-over-bot .reorder-separator-bottom {
-    display: block;
+  &.dnd-over-top {
+    --reorder-top-display: block;
   }
-}
 
-.reorder {
-  cursor: grab;
-  display: flex;
-  flex-direction: column;
-  height: $s-36;
-  justify-content: center;
-  left: calc(-1 * $s-2);
-  margin-top: calc(-1 * $s-2);
-  position: absolute;
-  width: $s-16;
-}
-
-.reorder-icon {
-  height: $s-16;
-  pointer-events: none;
-  stroke: var(--color-foreground-secondary);
-  visibility: hidden;
-}
-
-.reorder-separator-top {
-  border-color: var(--color-accent-primary);
-  display: none;
-  left: 0;
-  margin-left: $s-12;
-  margin-top: calc(-1 * $s-6);
-  position: absolute;
-  width: calc(100% - $s-24);
-}
-
-.reorder-separator-bottom {
-  border-color: var(--color-accent-primary);
-  display: none;
-  left: 0;
-  margin-left: $s-12;
-  margin-top: $s-36;
-  position: absolute;
-  width: calc(100% - $s-24);
+  &.dnd-over-bot {
+    --reorder-bottom-display: block;
+  }
 }
 
 .offset-input-wrapper {
@@ -185,9 +149,9 @@
 .gradient-separator {
   border-color: var(--color-background-quaternary);
   border-width: $s-3;
-  margin-left: -4%;
+  margin-left: calc(var(--sp-m) / 2);
   position: relative;
-  width: 108%;
+  width: calc(100% - var(--sp-m));
 }
 
 .gradient-preview-stop-preview {
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/libraries.scss b/frontend/src/app/main/ui/workspace/colorpicker/libraries.scss
index 8b401448d..9b510d97f 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/libraries.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/libraries.scss
@@ -9,6 +9,7 @@
 .libraries {
   margin-top: $s-8;
   width: 100%;
+  padding: 0 var(--sp-m);
 }
 
 .selected-colors {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.scss b/frontend/src/app/main/ui/workspace/sidebar/options.scss
index a7bbe6710..1d28ee908 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options.scss
@@ -11,7 +11,6 @@
   display: grid;
   width: 100%;
   height: 100%;
-  padding-left: $s-12;
 }
 
 .tab-spacing {
@@ -41,7 +40,7 @@
 }
 
 .design-options {
-  padding-inline-end: $s-12;
+  padding-inline: var(--sp-m);
 }
 
 .inspect {
@@ -49,5 +48,6 @@
 }
 
 .options-tab-switcher {
-  --tabs-nav-padding-inline-end: 12px;
+  --tabs-nav-padding-inline-start: var(--sp-m);
+  --tabs-nav-padding-inline-end: var(--sp-m);
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
index 3835b53cf..a443f17cf 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
@@ -10,6 +10,7 @@
   display: flex;
   flex-direction: column;
   gap: $s-8;
+  padding-left: var(--sp-m);
 }
 
 .interaction-options {
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 ac3fb8441..45b73c182 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
@@ -17,6 +17,7 @@
    [app.main.data.workspace.undo :as dwu]
    [app.main.store :as st]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
+   [app.main.ui.components.reorder-handler :refer [reorder-handler]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.components.title-bar :refer [title-bar]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
@@ -152,8 +153,10 @@
     [:div {:class (stl/css-case :global/shadow-option true
                                 :shadow-element true
                                 :dnd-over-top (= (:over dprops) :top)
-                                :dnd-over-bot (= (:over dprops) :bot))
-           :ref dref}
+                                :dnd-over-bot (= (:over dprops) :bot))}
+     (when (some? on-reorder)
+       [:& reorder-handler {:ref dref}])
+
      [:*
       [:div {:class (stl/css :basic-options)}
        [:div {:class (stl/css-case :shadow-info 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 24bfd97ff..e7f2a692c 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
@@ -5,6 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @import "refactor/common-refactor.scss";
+@import "../../../../ds/_sizes.scss";
 
 .element-set {
   margin: 0;
@@ -34,6 +35,21 @@
 
 .shadow-element {
   @include flexColumn;
+  position: relative;
+
+  --reorder-left-position: calc(-1 * var(--sp-m) - var(--sp-xxs));
+
+  &:hover {
+    --reorder-icon-visibility: visible;
+  }
+
+  &.dnd-over-top {
+    --reorder-top-display: block;
+  }
+
+  &.dnd-over-bot {
+    --reorder-bottom-display: block;
+  }
 }
 
 .basic-options {
@@ -87,6 +103,7 @@
 
 .shadow-advanced-options {
   @include flexColumn;
+  width: $sz-252;
 }
 
 .first-row,
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 286596bb1..f53360fc3 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
@@ -18,6 +18,7 @@
    [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.components.color-input :refer [color-input*]]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
+   [app.main.ui.components.reorder-handler :refer [reorder-handler]]
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.formats :as fmt]
@@ -28,7 +29,6 @@
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
-
 (def ^:private detach-icon
   (i/icon-xref :detach (stl/css :detach-icon)))
 
@@ -194,8 +194,12 @@
     [:div {:class (stl/css-case
                    :color-data true
                    :dnd-over-top (= (:over dprops) :top)
-                   :dnd-over-bot (= (:over dprops) :bot))
-           :ref dref}
+                   :dnd-over-bot (= (:over dprops) :bot))}
+
+     ;; Drag handler
+     (when (some? on-reorder)
+       [:& reorder-handler {:ref dref}])
+
      [:div {:class (stl/css :color-info)}
       [:div {:class (stl/css-case :color-name-wrapper true
                                   :no-opacity (or disable-opacity
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
index 791fcd052..2b515875a 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
@@ -9,11 +9,20 @@
 .color-data {
   @include flexRow;
 
-  &.dnd-over-top {
-    border-block-start: $s-1 solid var(--layer-row-foreground-color-drag);
+  position: relative;
+
+  --reorder-left-position: calc(-1 * var(--sp-m) - var(--sp-xxs));
+
+  &:hover {
+    --reorder-icon-visibility: visible;
   }
+
+  &.dnd-over-top {
+    --reorder-top-display: block;
+  }
+
   &.dnd-over-bot {
-    border-block-end: $s-1 solid var(--layer-row-foreground-color-drag);
+    --reorder-bottom-display: block;
   }
 }
 
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 6dd2c8b74..9545c380b 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
@@ -9,6 +9,7 @@
   (:require
    [app.common.data :as d]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
+   [app.main.ui.components.reorder-handler :refer [reorder-handler]]
    [app.main.ui.components.select :refer [select]]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
@@ -140,9 +141,12 @@
     [:div {:class (stl/css-case
                    :stroke-data true
                    :dnd-over-top (= (:over dprops) :top)
-                   :dnd-over-bot (= (:over dprops) :bot))
-           :ref dref}
-           ;; Stroke Color
+                   :dnd-over-bot (= (:over dprops) :bot))}
+
+     (when (some? on-reorder)
+       [:& reorder-handler {:ref dref}])
+
+     ;; Stroke Color
      [:& color-row {:color {:color (:stroke-color stroke)
                             :opacity (:stroke-opacity stroke)
                             :id (:stroke-color-ref-id stroke)
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 d2a367b49..0a9cda6b9 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
@@ -9,11 +9,20 @@
 .stroke-data {
   @include flexColumn;
 
-  &.dnd-over-top {
-    border-top: $s-1 solid var(--layer-row-foreground-color-drag);
+  position: relative;
+
+  --reorder-left-position: calc(-1 * var(--sp-l));
+
+  &:hover {
+    --reorder-icon-visibility: visible;
   }
+
+  &.dnd-over-top {
+    --reorder-top-display: block;
+  }
+
   &.dnd-over-bot {
-    border-bottom: $s-1 solid var(--layer-row-foreground-color-drag);
+    --reorder-bottom-display: block;
   }
 }