diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss
index ec14acfb0e..6c1923b926 100644
--- a/frontend/resources/styles/common/framework.scss
+++ b/frontend/resources/styles/common/framework.scss
@@ -373,9 +373,10 @@ ul.slider-dots {
     font-size: $fs12;
     height: 20px;
     position: absolute;
-    right: 3px;
+    right: $small;
+    text-align: right;
     top: 26%;
-    width: 20px;
+    width: 18px;
   }
 
   .after {
@@ -539,7 +540,7 @@ input.element-name {
   @extend .input-text;
   background-image: url("/images/icons/arrow-down-white.svg");
   background-repeat: no-repeat;
-  background-position: 95% 48%;
+  background-position: calc(100% - 4px) 48%;
   background-size: 10px;
   cursor: pointer;
 
diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss
index 3c47a77c55..4465ef2c35 100644
--- a/frontend/resources/styles/main/partials/sidebar-element-options.scss
+++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss
@@ -226,17 +226,17 @@
   .element-set-subtitle {
     color: $color-gray-20;
     font-size: $fs11;
-    width: 12rem;
+    width: 64px;
   }
 
   .lock-size {
     cursor: pointer;
-    width: 20%;
+    margin: auto;
 
     svg {
       fill: $color-gray-20;
-      height: 15px;
-      width: 15px;
+      height: 14px;
+      width: 14px;
 
       &:hover {
         fill: $color-primary;
@@ -518,16 +518,15 @@
 }
 
 .align-icons {
-  border: 1px solid $color-gray-60;
-  border-radius: $br-small;
   cursor: pointer;
   display: flex;
   flex: 1;
-  justify-content: space-between;
-  margin-left: $small;
-  padding: $small;
+  justify-content: flex-end;
+  margin: $small 0 $small $small;
+  padding: 0 $x-small;
 
   &:first-child {
+    justify-content: space-between;
     margin-left: 0;
   }
 
@@ -542,8 +541,8 @@
 
     svg {
       fill: $color-gray-30;
-      height: 15px;
-      width: 15px;
+      height: 14px;
+      width: 14px;
     }
 
     &:hover,
@@ -651,12 +650,12 @@
     display: flex;
     height: 18px;
     position: relative;
-    width: 18px;
+    width: 14px;
 
     svg {
       fill: $color-gray-30;
-      height: 16px;
-      width: 16px;
+      height: 14px;
+      width: 14px;
     }
   }
 }
@@ -927,6 +926,10 @@
     }
 }
 
+.spacing-options {
+  display: flex;
+}
+
 .asset-group {
     .typography-entry {
         margin: 0.25rem 0;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/measures.cljs
index fae050ac3e..f76fa2ee08 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/measures.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/measures.cljs
@@ -114,13 +114,6 @@
       (when (options :size)
         [:div.row-flex
          [:span.element-set-subtitle (t locale "workspace.options.size")]
-         [:div.lock-size {:class (classnames
-                                   :selected (true? proportion-lock)
-                                   :disabled (= proportion-lock :multiple))
-                          :on-click on-proportion-lock-change}
-          (if proportion-lock
-            i/lock
-            i/unlock)]
          [:div.input-element.width
           [:input.input-text {:type "number"
                               :min "0"
@@ -138,7 +131,15 @@
                               :placeholder "--"
                               :on-click select-all
                               :on-change on-height-change
-                              :value (attr->string :height values)}]]])
+                              :value (attr->string :height values)}]]
+
+         [:div.lock-size {:class (classnames
+                                   :selected (true? proportion-lock)
+                                   :disabled (= proportion-lock :multiple))
+                          :on-click on-proportion-lock-change}
+          (if proportion-lock
+            i/lock
+            i/unlock)]])
 
       ;; POSITION
       (when (options :position)
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs
index cde0071edc..25644aee75 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs
@@ -62,7 +62,7 @@
           (on-change {:text-align new-align}))]
 
     ;; --- Align
-    [:div.row-flex.align-icons
+    [:div.align-icons
      [:span.tooltip.tooltip-bottom
       {:alt (t locale "workspace.options.text-options.align-left")
        :class (dom/classnames :current (= "left" text-align))
@@ -85,58 +85,55 @@
       i/text-align-justify]]))
 
 
-(mf/defc additional-options
+(mf/defc vertical-align
   [{:keys [shapes editor ids values locale on-change] :as props}]
   (let [{:keys [vertical-align]} values
-
-        to-single-value (fn [coll] (if (> (count coll) 1) nil (first coll)))
-
-        grow-type (->> shapes (map :grow-type) (remove nil?) (into #{}) to-single-value)
-
         vertical-align (or vertical-align "top")
-
-        handle-change-grow
-        (fn [event grow-type]
-          (st/emit! (dwc/update-shapes ids #(assoc % :grow-type grow-type))))
-        
         handle-change
         (fn [event new-align]
           (on-change {:vertical-align new-align}))]
 
-    [:div.row-flex
-     [:div.align-icons
-      [:span.tooltip.tooltip-bottom
-       {:alt (t locale "workspace.options.text-options.align-top")
-        :class (dom/classnames :current (= "top" vertical-align))
-        :on-click #(handle-change % "top")}
-       i/align-top]
-      [:span.tooltip.tooltip-bottom
-       {:alt (t locale "workspace.options.text-options.align-middle")
-        :class (dom/classnames :current (= "center" vertical-align))
-        :on-click #(handle-change % "center")}
-       i/align-middle]
-      [:span.tooltip.tooltip-bottom
-       {:alt (t locale "workspace.options.text-options.align-bottom")
-        :class (dom/classnames :current (= "bottom" vertical-align))
-        :on-click #(handle-change % "bottom")}
-       i/align-bottom]]
+    [:div.align-icons
+     [:span.tooltip.tooltip-bottom
+      {:alt (t locale "workspace.options.text-options.align-top")
+       :class (dom/classnames :current (= "top" vertical-align))
+       :on-click #(handle-change % "top")}
+      i/align-top]
+     [:span.tooltip.tooltip-bottom
+      {:alt (t locale "workspace.options.text-options.align-middle")
+       :class (dom/classnames :current (= "center" vertical-align))
+       :on-click #(handle-change % "center")}
+      i/align-middle]
+     [:span.tooltip.tooltip-bottom
+      {:alt (t locale "workspace.options.text-options.align-bottom")
+       :class (dom/classnames :current (= "bottom" vertical-align))
+       :on-click #(handle-change % "bottom")}
+      i/align-bottom]]))
 
-     [:div.align-icons
-      [:span.tooltip.tooltip-bottom
-       {:alt (t locale "workspace.options.text-options.grow-fixed")
-        :class (dom/classnames :current (= :fixed grow-type))
-        :on-click #(handle-change-grow % :fixed)}
-       i/auto-fix]
-      [:span.tooltip.tooltip-bottom
-       {:alt (t locale "workspace.options.text-options.grow-auto-width")
-        :class (dom/classnames :current (= :auto-width grow-type))
-        :on-click #(handle-change-grow % :auto-width)}
-       i/auto-width]
-      [:span.tooltip.tooltip-bottom
-       {:alt (t locale "workspace.options.text-options.grow-auto-height")
-        :class (dom/classnames :current (= :auto-height grow-type))
-        :on-click #(handle-change-grow % :auto-height)}
-       i/auto-height]]]))
+(mf/defc grow-options
+  [{:keys [shapes editor ids values locale on-change] :as props}]
+  (let [to-single-value (fn [coll] (if (> (count coll) 1) nil (first coll)))
+        grow-type (->> shapes (map :grow-type) (remove nil?) (into #{}) to-single-value)
+        handle-change-grow
+        (fn [event grow-type]
+          (st/emit! (dwc/update-shapes ids #(assoc % :grow-type grow-type))))]
+
+    [:div.align-icons
+     [:span.tooltip.tooltip-bottom
+      {:alt (t locale "workspace.options.text-options.grow-fixed")
+       :class (dom/classnames :current (= :fixed grow-type))
+       :on-click #(handle-change-grow % :fixed)}
+      i/auto-fix]
+     [:span.tooltip.tooltip-bottom
+      {:alt (t locale "workspace.options.text-options.grow-auto-width")
+       :class (dom/classnames :current (= :auto-width grow-type))
+       :on-click #(handle-change-grow % :auto-width)}
+      i/auto-width]
+     [:span.tooltip.tooltip-bottom
+      {:alt (t locale "workspace.options.text-options.grow-auto-height")
+       :class (dom/classnames :current (= :auto-height grow-type))
+       :on-click #(handle-change-grow % :auto-height)}
+      i/auto-height]]))
 
 (mf/defc text-decoration-options
   [{:keys [editor ids values locale on-change] :as props}]
@@ -147,26 +144,24 @@
         handle-change
         (fn [event type]
           (on-change {:text-decoration type}))]
-    [:div.row-flex
-     [:span.element-set-subtitle (t locale "workspace.options.text-options.decoration")]
-     [:div.align-icons
-      [:span.tooltip.tooltip-bottom
-       {:alt (t locale "workspace.options.text-options.none")
-        :class (dom/classnames :current (= "none" text-decoration))
-        :on-click #(handle-change % "none")}
-       i/minus]
+    [:div.align-icons
+     [:span.tooltip.tooltip-bottom
+      {:alt (t locale "workspace.options.text-options.none")
+       :class (dom/classnames :current (= "none" text-decoration))
+       :on-click #(handle-change % "none")}
+      i/minus]
 
-      [:span.tooltip.tooltip-bottom
-       {:alt (t locale "workspace.options.text-options.underline")
-        :class (dom/classnames :current (= "underline" text-decoration))
-        :on-click #(handle-change % "underline")}
-       i/underline]
+     [:span.tooltip.tooltip-bottom
+      {:alt (t locale "workspace.options.text-options.underline")
+       :class (dom/classnames :current (= "underline" text-decoration))
+       :on-click #(handle-change % "underline")}
+      i/underline]
 
-      [:span.tooltip.tooltip-bottom
-       {:alt (t locale "workspace.options.text-options.strikethrough")
-        :class (dom/classnames :current (= "line-through" text-decoration))
-        :on-click #(handle-change % "line-through")}
-       i/strikethrough]]]))
+     [:span.tooltip.tooltip-bottom
+      {:alt (t locale "workspace.options.text-options.strikethrough")
+       :class (dom/classnames :current (= "line-through" text-decoration))
+       :on-click #(handle-change % "line-through")}
+      i/strikethrough]]))
 
 (defn generate-typography-name [{:keys [font-id font-variant-id] :as typography}]
   (let [{:keys [name]} (fonts/get-font-data font-id)]
@@ -273,9 +268,16 @@
        [:> typography-options opts])
 
      [:div.element-set-content
-      [:> text-align-options opts]
-      [:> additional-options opts]
-      [:> text-decoration-options opts]]]))
+
+      [:div.row-flex
+       [:> text-align-options opts]
+       [:> vertical-align opts]]
+
+      [:div.row-flex
+       [:> grow-options opts]
+       [:> text-decoration-options opts]]
+      
+      ]]))
 
 (mf/defc options
   [{:keys [shape] :as props}]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs
index 08f83a2c9f..b7a9b8200b 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/typography.cljs
@@ -135,7 +135,7 @@
           (let [new-spacing (dom/get-target-val event)]
             (on-change {attr new-spacing})))]
 
-    [:div.row-flex
+    [:div.spacing-options
      [:div.input-icon
       [:span.icon-before.tooltip.tooltip-bottom
        {:alt (t locale "workspace.options.text-options.line-height")}
@@ -171,29 +171,27 @@
         handle-change
         (fn [event type]
           (on-change {:text-transform type}))]
-    [:div.row-flex
-     [:span.element-set-subtitle (t locale "workspace.options.text-options.text-case")]
-     [:div.align-icons
-      [:span.tooltip.tooltip-bottom
-       {:alt (t locale "workspace.options.text-options.none")
-        :class (dom/classnames :current (= "none" text-transform))
-        :on-click #(handle-change % "none")}
-       i/minus]
-      [:span.tooltip.tooltip-bottom
-       {:alt (t locale "workspace.options.text-options.uppercase")
-        :class (dom/classnames :current (= "uppercase" text-transform))
-        :on-click #(handle-change % "uppercase")}
-       i/uppercase]
-      [:span.tooltip.tooltip-bottom
-       {:alt (t locale "workspace.options.text-options.lowercase")
-        :class (dom/classnames :current (= "lowercase" text-transform))
-        :on-click #(handle-change % "lowercase")}
-       i/lowercase]
-      [:span.tooltip.tooltip-bottom
-       {:alt (t locale "workspace.options.text-options.titlecase")
-        :class (dom/classnames :current (= "capitalize" text-transform))
-        :on-click #(handle-change % "capitalize")}
-       i/titlecase]]]))
+    [:div.align-icons
+     [:span.tooltip.tooltip-bottom
+      {:alt (t locale "workspace.options.text-options.none")
+       :class (dom/classnames :current (= "none" text-transform))
+       :on-click #(handle-change % "none")}
+      i/minus]
+     [:span.tooltip.tooltip-bottom
+      {:alt (t locale "workspace.options.text-options.uppercase")
+       :class (dom/classnames :current (= "uppercase" text-transform))
+       :on-click #(handle-change % "uppercase")}
+      i/uppercase]
+     [:span.tooltip.tooltip-bottom
+      {:alt (t locale "workspace.options.text-options.lowercase")
+       :class (dom/classnames :current (= "lowercase" text-transform))
+       :on-click #(handle-change % "lowercase")}
+      i/lowercase]
+     [:span.tooltip.tooltip-bottom
+      {:alt (t locale "workspace.options.text-options.titlecase")
+       :class (dom/classnames :current (= "capitalize" text-transform))
+       :on-click #(handle-change % "capitalize")}
+      i/titlecase]]))
 
 (mf/defc typography-options
   [{:keys [ids editor values on-change]}]
@@ -206,8 +204,9 @@
 
     [:div.element-set-content
      [:> font-options opts]
-     [:> spacing-options opts]
-     [:> text-transform-options opts]]))
+     [:div.row-flex
+      [:> spacing-options opts]
+      [:> text-transform-options opts]]]))
 
 
 (mf/defc typography-entry