diff --git a/packages/builder/src/components/common/Input.svelte b/packages/builder/src/components/common/Input.svelte
index e39f4fe1a9..3ac872dc5a 100644
--- a/packages/builder/src/components/common/Input.svelte
+++ b/packages/builder/src/components/common/Input.svelte
@@ -14,7 +14,8 @@
   
   function handleChange(val) {
     value = val
-    onChange(value)
+    let _value = value !== "auto" ? value + suffix : value
+    onChange(_value)
   }
 
   $: displayValue = suffix && value && value.endsWith(suffix) ? value.replace(new RegExp(`${suffix}$`), "") : (value || "")
diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte
index 886d1def6f..a1cab5a50f 100644
--- a/packages/builder/src/components/common/Inputs/InputGroup.svelte
+++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte
@@ -10,9 +10,10 @@
   export let onChange = () => {}
 
   function handleChange(val, idx) {
-    value.splice(idx, 1, suffix ? val + suffix : val)
+    value.splice(idx, 1, val !== "auto" ? val + suffix : val)
+    
     value = value
-    let _value = value.map(v => (!v.endsWith(suffix) ? v + suffix : v))
+    let _value = value.map(v => (!v.endsWith(suffix) && v !== "auto" ? v + suffix : v))
     onChange(_value)
   }
 
@@ -26,7 +27,7 @@
   <div class="inputs-group">
     {#each meta as m, i}
       <Input
-        width="32px"
+        width="37px"
         textAlign="center"
         placeholder={m.placeholder || ''}
         value={!displayValues || displayValues[i] === '0' ? '' : displayValues[i]}
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index dbeec13940..59458edd49 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -240,7 +240,7 @@ export const typography = [
     label: "Weight",
     key: "font-weight",
     control: OptionSelect,
-    options: ["normal", "bold", "bolder", "lighter"],
+    options: ["200", "300", "400", "500", "600", "700", "800", "900"],
   },
   {
     label: "size",
@@ -297,7 +297,7 @@ export const typography = [
 
 export const background = [
   {
-    label: "Background",
+    label: "Color",
     key: "background",
     control: Input,
   },