diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss
index 192206232..b9d9d85a7 100644
--- a/frontend/resources/styles/common/refactor/basic-rules.scss
+++ b/frontend/resources/styles/common/refactor/basic-rules.scss
@@ -65,7 +65,8 @@
       stroke: var(--button-primary-foreground-color-active);
     }
   }
-  &:global(.disabled) {
+  &:global(.disabled),
+  &[disabled] {
     background-color: var(--button-background-color-disabled);
     border: $s-1 solid var(--button-border-color-disabled);
     color: var(--button-foreground-color-disabled);
@@ -105,7 +106,8 @@
       stroke: var(--button-secondary-foreground-color-active);
     }
   }
-  &:global(.disabled) {
+  &:global(.disabled),
+  &[disabled] {
     background-color: var(--button-background-color-disabled);
     border: $s-1 solid var(--button-border-color-disabled);
     color: var(--button-foreground-color-disabled);
@@ -144,11 +146,16 @@
       stroke: var(--button-tertiary-foreground-color-active);
     }
   }
-  &:global(.disabled) {
-    background-color: var(--button-background-color-disabled);
-    border: $s-1 solid var(--button-border-color-disabled);
+  &:global(.disabled),
+  &[disabled] {
     color: var(--button-foreground-color-disabled);
     cursor: unset;
+    pointer-events: none;
+
+    svg,
+    span svg {
+      stroke: var(--button-background-color-disabled);
+    }
   }
 }
 
diff --git a/frontend/src/app/main/ui/components/tab_container.scss b/frontend/src/app/main/ui/components/tab_container.scss
index 00be5342e..f30d9fea0 100644
--- a/frontend/src/app/main/ui/components/tab_container.scss
+++ b/frontend/src/app/main/ui/components/tab_container.scss
@@ -14,10 +14,13 @@
   .tab-container-content {
     overflow-y: auto;
     overflow-x: hidden;
+    display: flex;
+    flex-direction: column;
   }
 
   .tab-element {
-    height: fit-content;
+    flex: 1;
+    height: 100%;
   }
 }
 .tab-container-tabs {
diff --git a/frontend/src/app/main/ui/viewer/inspect/code.scss b/frontend/src/app/main/ui/viewer/inspect/code.scss
index a5a61e00d..6623a558e 100644
--- a/frontend/src/app/main/ui/viewer/inspect/code.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/code.scss
@@ -17,6 +17,7 @@
     }
   }
   .code-block {
+    padding: 0 $s-4 $s-8 0;
     .code-row-lang {
       display: flex;
       justify-content: space-between;
diff --git a/frontend/src/app/main/ui/viewer/inspect/exports.scss b/frontend/src/app/main/ui/viewer/inspect/exports.scss
index 8d5c74809..6e2301fd7 100644
--- a/frontend/src/app/main/ui/viewer/inspect/exports.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/exports.scss
@@ -7,6 +7,8 @@
 @import "refactor/common-refactor.scss";
 
 .element-set {
+  padding-bottom: $s-16;
+
   .element-title {
     .title-spacing-export-viewer {
       @extend .attr-title;
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 97fc2a1be..de3e6d54c 100644
--- a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
@@ -15,6 +15,9 @@
   right: unset;
   grid-area: right-sidebar;
   .tool-windows {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
     .shape-row {
       display: flex;
       gap: $s-8;
@@ -61,4 +64,9 @@
       padding: $s-8 $s-24;
     }
   }
+
+  .inspect-content {
+    flex: 1;
+    overflow: hidden;
+  }
 }
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 564fc72d2..0dfa490ed 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/color_inputs.scss
@@ -8,6 +8,8 @@
 
 .color-values {
   @include flexColumn;
+  margin-top: $s-8;
+
   &.disable-opacity {
     grid-template-columns: 3.5rem repeat(3, 1fr);
   }
@@ -16,6 +18,8 @@
     .input-wrapper {
       @extend .input-element;
       width: $s-84;
+      display: flex;
+      align-items: baseline;
     }
   }
   .hex-alpha-wrapper {
@@ -25,6 +29,9 @@
       width: $s-84;
       &.hex {
         width: $s-172;
+        display: flex;
+        align-items: baseline;
+        gap: $s-8;
       }
     }
   }
diff --git a/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss b/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss
index dc788dbb8..450dcd9e5 100644
--- a/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss
+++ b/frontend/src/app/main/ui/workspace/colorpicker/ramp.scss
@@ -12,7 +12,7 @@
   height: $s-140;
   width: $s-256;
   margin-top: $s-12;
-  margin-bottom: $s-6;
+  margin-bottom: $s-12;
   cursor: pointer;
 
   .handler {
@@ -44,3 +44,6 @@
   height: $s-52;
   cursor: pointer;
 }
+.sliders-wrapper {
+  @include flexColumn;
+}
diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss
index cdee7b092..2db3097f9 100644
--- a/frontend/src/app/main/ui/workspace/libraries.scss
+++ b/frontend/src/app/main/ui/workspace/libraries.scss
@@ -62,7 +62,7 @@
           flex-direction: column;
           height: calc(100% - $s-12);
           .title-spacing-lib {
-            margin: 0 0 $s-24 calc(-1 * $s-8);
+            margin: 0 0 0 calc(-1 * $s-8);
           }
           .section-list,
           .section-list-shared {
@@ -70,6 +70,7 @@
             max-height: $s-320;
             margin-top: $s-12;
             overflow: auto;
+            padding-right: $s-8;
             .section-list-item {
               display: grid;
               grid-template-columns: 1fr auto;
diff --git a/frontend/src/app/main/ui/workspace/palette.scss b/frontend/src/app/main/ui/workspace/palette.scss
index b13958ee0..b47e5337a 100644
--- a/frontend/src/app/main/ui/workspace/palette.scss
+++ b/frontend/src/app/main/ui/workspace/palette.scss
@@ -112,6 +112,7 @@
   .palette {
     grid-area: palette;
     width: 100%;
+    min-width: 0;
   }
   .handler {
     @include buttonStyle;
diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss
index 112c76c79..b74e5601a 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar.scss
@@ -32,18 +32,16 @@ $width-settings-bar-max: $s-500;
     left: 0;
     width: 100%;
     height: $s-12;
-    border-top: 2px solid var(--color-background-secondary);
+    border-top: 2px solid var(--color-background-quaternary);
     background-color: var(--color-background-primary);
     cursor: ns-resize;
-    &:hover {
-      border-color: var(--color-background-quaternary);
-    }
   }
   .settings-bar-inside {
     display: grid;
     grid-template-columns: 100%;
     grid-template-rows: 100%;
     height: calc(100vh - $s-52);
+    overflow: hidden;
     .tabs-wrapper {
       .layers-tab {
         display: grid;
@@ -63,6 +61,8 @@ $width-settings-bar-max: $s-500;
   width: $width-settings-bar;
   background-color: var(--panel-background-color);
   height: 100%;
+  display: flex;
+  flex-direction: column;
   &.not-expand {
     max-width: $width-settings-bar;
   }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.scss b/frontend/src/app/main/ui/workspace/sidebar/options.scss
index 9bb5aa990..09d9a1f82 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options.scss
@@ -11,6 +11,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  height: 100%;
   padding-left: $s-12;
 
   .tab-spacing {
@@ -27,6 +28,7 @@
 
   .element-options {
     width: 100%;
+    height: 100%;
     display: flex;
     flex-direction: column;
     gap: $s-16;
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 6a0406a14..6138aed7d 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
@@ -98,6 +98,7 @@
             @extend .input-element;
             width: $s-60;
             min-width: $s-60;
+            align-items: baseline;
             input {
               width: $s-32;
             }
@@ -109,6 +110,9 @@
               width: $s-44;
             }
           }
+          .spread-input {
+            gap: $s-8;
+          }
         }
       }
     }
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 6eeadc248..a28a96d36 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
@@ -24,6 +24,10 @@
       border-radius: $br-8 0 0 $br-8;
       padding: 0;
       margin-right: 0;
+      gap: $s-4;
+      input {
+        padding: 0;
+      }
       &.no-opacity {
         border-radius: $br-8;
       }
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 147df0fbb..8bbf447dc 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
@@ -12,13 +12,12 @@
     @include flexRow;
     .stroke-width-input-element {
       @extend .input-element;
-      width: $s-60;
+      width: $s-96;
       border-radius: $br-8;
       .icon {
         @include flexCenter;
         height: $s-32;
-        width: $s-12;
-        margin-right: $s-4;
+        width: $s-20;
       }
     }
     .select-wrapper {
diff --git a/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs b/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs
index e310d8755..5dcb1b6d3 100644
--- a/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/path_actions.cljs
@@ -115,14 +115,14 @@
       [:div {:class (stl/css :sub-actions)}
        [:div {:class (stl/css :sub-actions-group)}
 
-      ;; Draw Mode
+        ;; Draw Mode
         [:button
          {:class  (stl/css-case :is-toggled (= edit-mode :draw))
           :title (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes))
           :on-click on-select-draw-mode}
          i/pentool-refactor]
 
-      ;; Edit mode
+        ;; Edit mode
         [:button
          {:class (stl/css-case :is-toggled (= edit-mode :move))
           :title (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes))
@@ -130,59 +130,58 @@
          i/move-refactor]]
 
        [:div {:class (stl/css :sub-actions-group)}
-
-      ;; Add Node
+        ;; Add Node
         [:button
-         {:class  (stl/css-case :is-disabled (not (:add-node enabled-buttons)))
+         {:disabled (not (:add-node enabled-buttons))
           :title (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node))
           :on-click on-add-node}
          i/add-refactor]
 
-      ;; Remove node
+        ;; Remove node
         [:button
-         {:class (stl/css-case :is-disabled (not (:remove-node enabled-buttons)))
+         {:disabled (not (:remove-node enabled-buttons))
           :title (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node))
           :on-click on-remove-node}
          i/remove-refactor]]
 
        [:div {:class (stl/css :sub-actions-group)}
-      ;; Merge Nodes
+        ;; Merge Nodes
         [:button
-         {:class (stl/css-case :is-disabled (not (:merge-nodes enabled-buttons)))
+         {:disabled (not (:merge-nodes enabled-buttons))
           :title (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes))
           :on-click on-merge-nodes}
          i/merge-nodes-refactor]
 
-      ;; Join Nodes
+        ;; Join Nodes
         [:button
-         {:class (stl/css-case :is-disabled (not (:join-nodes enabled-buttons)))
+         {:disabled (not (:join-nodes enabled-buttons))
           :title (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes))
           :on-click on-join-nodes}
          i/join-nodes-refactor]
 
-      ;; Separate Nodes
+        ;; Separate Nodes
         [:button
-         {:class (stl/css-case :is-disabled (not (:separate-nodes enabled-buttons)))
+         {:disabled (not (:separate-nodes enabled-buttons))
           :title (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes))
           :on-click on-separate-nodes}
          i/separate-nodes-refactor]]
 
-     ;; Make Corner
+       ;; Make Corner
        [:div {:class (stl/css :sub-actions-group)}
         [:button
-         {:class (stl/css-case :is-disabled (not (:make-corner enabled-buttons)))
+         {:disabled (not (:make-corner enabled-buttons))
           :title (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner))
           :on-click on-make-corner}
          i/to-corner-refactor]
 
-      ;; Make Curve
+        ;; Make Curve
         [:button
-         {:class (stl/css-case :is-disabled (not (:make-curve enabled-buttons)))
+         {:disabled (not (:make-curve enabled-buttons))
           :title (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve))
           :on-click on-make-curve}
          i/to-curve-refactor]]
 
-     ;; Toggle snap
+       ;; Toggle snap
        [:div {:class (stl/css :sub-actions-group)}
         [:button
          {:class  (stl/css-case :is-toggled snap-toggled)
@@ -195,14 +194,14 @@
       [:div.path-actions
        [:div.viewport-actions-group
 
-      ;; Draw Mode
+        ;; Draw Mode
         [:div.viewport-actions-entry.tooltip.tooltip-bottom
          {:class (when (= edit-mode :draw) "is-toggled")
           :alt (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes))
           :on-click on-select-draw-mode}
          i/pen]
 
-      ;; Edit mode
+        ;; Edit mode
         [:div.viewport-actions-entry.tooltip.tooltip-bottom
          {:class (when (= edit-mode :move) "is-toggled")
           :alt (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes))
@@ -210,14 +209,14 @@
          i/pointer-inner]]
 
        [:div.viewport-actions-group
-      ;; Add Node
+        ;; Add Node
         [:div.viewport-actions-entry.tooltip.tooltip-bottom
          {:class (when-not (:add-node enabled-buttons) "is-disabled")
           :alt (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node))
           :on-click on-add-node}
          i/nodes-add]
 
-      ;; Remove node
+        ;; Remove node
         [:div.viewport-actions-entry.tooltip.tooltip-bottom
          {:class (when-not (:remove-node enabled-buttons) "is-disabled")
           :alt (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node))
@@ -225,28 +224,28 @@
          i/nodes-remove]]
 
        [:div.viewport-actions-group
-      ;; Merge Nodes
+        ;; Merge Nodes
         [:div.viewport-actions-entry.tooltip.tooltip-bottom
          {:class (when-not (:merge-nodes enabled-buttons) "is-disabled")
           :alt (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes))
           :on-click on-merge-nodes}
          i/nodes-merge]
 
-      ;; Join Nodes
+        ;; Join Nodes
         [:div.viewport-actions-entry.tooltip.tooltip-bottom
          {:class (when-not (:join-nodes enabled-buttons) "is-disabled")
           :alt (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes))
           :on-click on-join-nodes}
          i/nodes-join]
 
-      ;; Separate Nodes
+        ;; Separate Nodes
         [:div.viewport-actions-entry.tooltip.tooltip-bottom
          {:class (when-not (:separate-nodes enabled-buttons) "is-disabled")
           :alt (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes))
           :on-click on-separate-nodes}
          i/nodes-separate]]
 
-     ;; Make Corner
+       ;; Make Corner
        [:div.viewport-actions-group
         [:div.viewport-actions-entry.tooltip.tooltip-bottom
          {:class (when-not (:make-corner enabled-buttons) "is-disabled")
@@ -254,14 +253,14 @@
           :on-click on-make-corner}
          i/nodes-corner]
 
-      ;; Make Curve
+        ;; Make Curve
         [:div.viewport-actions-entry.tooltip.tooltip-bottom
          {:class (when-not (:make-curve enabled-buttons) "is-disabled")
           :alt (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve))
           :on-click on-make-curve}
          i/nodes-curve]]
 
-     ;; Toggle snap
+       ;; Toggle snap
        [:div.viewport-actions-group
         [:div.viewport-actions-entry.tooltip.tooltip-bottom
          {:class (when snap-toggled "is-toggled")
diff --git a/frontend/src/app/main/ui/workspace/viewport/path_actions.scss b/frontend/src/app/main/ui/workspace/viewport/path_actions.scss
index 2864f4968..52690c53e 100644
--- a/frontend/src/app/main/ui/workspace/viewport/path_actions.scss
+++ b/frontend/src/app/main/ui/workspace/viewport/path_actions.scss
@@ -41,10 +41,6 @@
       border-radius: $s-8;
       border: none;
       margin: 0 $s-2;
-      &.is-disabled {
-        pointer-events: none;
-        opacity: 40%;
-      }
       &.is-toggled {
         background-color: var(--button-radio-background-color-active);
         svg {