diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss
index 832324e2d..3425aca89 100644
--- a/frontend/resources/styles/main/partials/sidebar-element-options.scss
+++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss
@@ -373,7 +373,7 @@
     width: 60%;
 
     svg {
-      fill: $color-gray-40;
+      fill: $color-gray-10;
       height: 10px;
       width: 10px;
     }
@@ -385,6 +385,11 @@
       width: 60%;
     }
 
+    input.input-text {
+        border: none;
+        background: none;
+    }
+
     .input-select {
       background-color: transparent;
       border: none;
@@ -404,12 +409,12 @@
 
     .dropdown-button {
       position: absolute;
-      top: 4px;
       right: 0;
+      padding-right: 4px;
     }
 
     &.input-option {
-      height: 2rem;
+      height: 26px;
       border-bottom: 1px solid #64666A;
       width: 100%;
       margin-left: 0.25rem;
@@ -431,6 +436,15 @@
 }
 
 .element-set-content .grid-option-main  {
+  .editable-select {
+    height: 2rem;
+  }
+  .editable-select svg {
+      fill: $color-gray-40;
+  }
+  .dropdown-button {
+      top: 4px;
+  }
   .editable-select.input-option .input-text {
     padding: 0;
     padding-top: 0.18rem;
@@ -689,6 +703,7 @@
   &:hover {
     background: $color-gray-60;
 
+    
     .custom-select,
     .editable-select,
     input {
diff --git a/frontend/src/app/main/data/colors.cljs b/frontend/src/app/main/data/colors.cljs
index 3d27f424d..4947ab0fd 100644
--- a/frontend/src/app/main/data/colors.cljs
+++ b/frontend/src/app/main/data/colors.cljs
@@ -197,7 +197,7 @@
                                  :stroke-color-ref-file file-id)
 
                           (= (:stroke-style s) :none)
-                          (assoc :stroke-style "solid"
+                          (assoc :stroke-style :solid
                                  :stroke-width 1
                                  :stroke-opacity 1)))]
         (rx/of (dwc/update-shapes ids update-fn))))))
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 f6c918db7..5d825ca0c 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs
@@ -20,6 +20,7 @@
    [app.main.refs :as refs]
    [app.main.ui.workspace.sidebar.options.measures :refer [measure-attrs measures-menu]]
    [app.main.ui.workspace.sidebar.options.fill :refer [fill-menu]]
+   [app.main.ui.components.editable-select :refer [editable-select]]
    [app.util.dom :as dom]
    [app.main.fonts :as fonts]
    [app.util.i18n :as i18n :refer [tr t]]
@@ -90,15 +91,13 @@
                 (fonts/ensure-loaded! new-font-id (partial change-font new-font-id))))))
 
         on-font-size-change
-        (fn [event]
-          (let [new-font-size (-> (dom/get-target event)
-                                  (dom/get-value))]
-            (when-not (str/empty? new-font-size)
-              (run! #(st/emit! (dwt/update-text-attrs
-                                 {:id %
-                                  :editor editor
-                                  :attrs {:font-size new-font-size}}))
-                    ids))))
+        (fn [new-font-size]
+          (when-not (str/empty? new-font-size)
+            (run! #(st/emit! (dwt/update-text-attrs
+                              {:id %
+                               :editor editor
+                               :attrs {:font-size (str new-font-size)}}))
+                  ids)))
 
         on-font-variant-change
         (fn [event]
@@ -125,28 +124,15 @@
        [:& font-select-optgroups]]]
 
      [:div.row-flex
-      [:div.editable-select
-       [:select.input-select {:value (attr->string font-size)
-                              :on-change on-font-size-change}
-        (when (= font-size :multiple)
-          [:option {:value ""} "--"])
-        [:option {:value "8"} "8"]
-        [:option {:value "9"} "9"]
-        [:option {:value "10"} "10"]
-        [:option {:value "11"} "11"]
-        [:option {:value "12"} "12"]
-        [:option {:value "14"} "14"]
-        [:option {:value "18"} "18"]
-        [:option {:value "24"} "24"]
-        [:option {:value "36"} "36"]
-        [:option {:value "48"} "48"]
-        [:option {:value "72"} "72"]]
-       [:input.input-text {:type "number"
-                           :min "0"
-                           :max "200"
-                           :value font-size
-                           :placeholder "--"
-                           :on-change on-font-size-change}]]
+      (let [size-options [8 9 10 11 12 14 18 24 36 48 72]
+            size-options (if (= font-size :multiple) (concat [{:value "" :label "--"}] size-options) size-options)]
+        [:& editable-select
+         {:value (attr->string font-size)
+          :class "input-option"
+          :options size-options
+          :type "number"
+          :placeholder "--"
+          :on-change on-font-size-change}])
 
       [:select.input-select {:value (attr->string font-variant-id)
                              :on-change on-font-variant-change}