diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index bb35f2704c..71514fb209 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -11,9 +11,10 @@ export const layout = [
     label: "Display",
     key: "display",
     control: OptionSelect,
-    initialValue: "",
     options: [
-      { label: "N/A ", value: "N/A" },
+      { label: "Choose option", value: "" },
+      { label: "Block", value: "block" },
+      { label: "Inline Block", value: "inline-block" },
       { label: "Flex", value: "flex" },
       { label: "Inline Flex", value: "inline-flex" },
     ],
@@ -31,15 +32,15 @@ export const layout = [
         padding: "0px 5px",
         value: "columnReverse",
       },
+      { icon: "ri-close-line", value: "" },
     ],
   },
   {
     label: "Justify",
     key: "justify-content",
     control: OptionSelect,
-    initialValue: "Flex Start",
     options: [
-      { label: "", value: "" },
+      { label: "Choose option", value: "" },
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
       { label: "Center", value: "center" },
@@ -52,8 +53,8 @@ export const layout = [
     label: "Align",
     key: "align-items",
     control: OptionSelect,
-    initialValue: "Flex Start",
     options: [
+      { label: "Choose option", value: "" },
       { label: "Flex Start", value: "flex-start" },
       { label: "Flex End", value: "flex-end" },
       { label: "Center", value: "center" },
@@ -66,8 +67,9 @@ export const layout = [
     key: "flex-wrap",
     control: OptionSelect,
     options: [
-      { label: "wrap", value: "wrap" },
-      { label: "no wrap", value: "noWrap" },
+      { label: "Choose option", value: "" },
+      { label: "Wrap", value: "wrap" },
+      { label: "No wrap", value: "nowrap" },
     ],
   },
   {
@@ -75,6 +77,7 @@ export const layout = [
     key: "gap",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -93,6 +96,7 @@ export const margin = [
     key: "margin",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -112,6 +116,7 @@ export const margin = [
     key: "margin-top",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -131,6 +136,7 @@ export const margin = [
     key: "margin-right",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -150,6 +156,7 @@ export const margin = [
     key: "margin-bottom",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -169,6 +176,7 @@ export const margin = [
     key: "margin-left",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -191,6 +199,7 @@ export const padding = [
     key: "padding",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -208,6 +217,7 @@ export const padding = [
     key: "padding-top",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -225,6 +235,7 @@ export const padding = [
     key: "padding-right",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -242,6 +253,7 @@ export const padding = [
     key: "padding-bottom",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -259,6 +271,7 @@ export const padding = [
     key: "padding-left",
     control: OptionSelect,
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0px" },
       { label: "4px", value: "4px" },
       { label: "8px", value: "8px" },
@@ -278,8 +291,8 @@ export const size = [
     label: "Flex",
     key: "flex",
     control: OptionSelect,
-    defaultValue: "0 1 auto",
     options: [
+      { label: "Choose option", value: "" },
       { label: "Shrink", value: "0 1 auto" },
       { label: "Grow", value: "1 1 auto" },
     ],
@@ -333,9 +346,8 @@ export const position = [
     label: "Position",
     key: "position",
     control: OptionSelect,
-    initialValue: "None",
     options: [
-      { label: "None", value: "none" },
+      { label: "Choose option", value: "" },
       { label: "Static", value: "static" },
       { label: "Relative", value: "relative" },
       { label: "Fixed", value: "fixed" },
@@ -375,7 +387,18 @@ export const position = [
     label: "Z-index",
     key: "z-index",
     control: OptionSelect,
-    options: ["-9999", "-3", "-2", "-1", "0", "1", "2", "3", "9999"],
+    options: [
+      { label: "Choose option", value: "" },
+      { label: "-9999", value: "-9999" },
+      { label: "-3", value: "-3" },
+      { label: "-2", value: "-2" },
+      { label: "-1", value: "-1" },
+      { label: "0", value: "0" },
+      { label: "1", value: "1" },
+      { label: "2", value: "2" },
+      { label: "3", value: "3" },
+      { label: "9999", value: "9999" },
+    ],
   },
 ]
 
@@ -384,22 +407,22 @@ export const typography = [
     label: "Font",
     key: "font-family",
     control: OptionSelect,
-    defaultValue: "Arial",
     options: [
-      "Arial",
-      "Arial Black",
-      "Cursive",
-      "Courier",
-      "Comic Sans MS",
-      "Helvetica",
-      "Helvetica Neue",
-      "Impact",
-      "Inter",
-      "Lucida Sans Unicode",
-      "Roboto",
-      "Roboto Mono",
-      "Times New Roman",
-      "Verdana",
+      { label: "Choose option", value: "" },
+      { label: "Arial", value: "Arial" },
+      { label: "Arial Black", value: "Arial Black" },
+      { label: "Cursive", value: "Cursive" },
+      { label: "Courier", value: "Courier" },
+      { label: "Comic Sans MS", value: "Comic Sans MS" },
+      { label: "Helvetica", value: "Helvetica" },
+      { label: "Helvetica Neue", value: "Helvetica Neue" },
+      { label: "Impact", value: "Impact" },
+      { label: "Inter", value: "Inter" },
+      { label: "Lucida Sans Unicode", value: "Lucida Sans Unicode" },
+      { label: "Roboto", value: "Roboto" },
+      { label: "Roboto Mono", value: "Roboto Mono" },
+      { label: "Times New Roman", value: "Times New Roman" },
+      { label: "Verdana", value: "Verdana" },
     ],
     styleBindingProperty: "font-family",
   },
@@ -407,25 +430,36 @@ export const typography = [
     label: "Weight",
     key: "font-weight",
     control: OptionSelect,
-    options: ["200", "300", "400", "500", "600", "700", "800", "900"],
+    options: [
+      { label: "Choose option", value: "" },
+      { label: "200", value: "200" },
+      { label: "300", value: "300" },
+      { label: "400", value: "400" },
+      { label: "500", value: "500" },
+      { label: "600", value: "600" },
+      { label: "700", value: "700" },
+      { label: "800", value: "800" },
+      { label: "900", value: "900" },
+    ],
   },
   {
     label: "size",
     key: "font-size",
     control: OptionSelect,
     options: [
-      "8px",
-      "10px",
-      "12px",
-      "14px",
-      "16px",
-      "18px",
-      "20px",
-      "24px",
-      "32px",
-      "48px",
-      "60px",
-      "72px",
+      { label: "Choose option", value: "" },
+      { label: "8px", value: "8px" },
+      { label: "10px", value: "10px" },
+      { label: "12px", value: "12px" },
+      { label: "14px", value: "14px" },
+      { label: "16px", value: "16px" },
+      { label: "18px", value: "18px" },
+      { label: "20px", value: "20px" },
+      { label: "24px", value: "24px" },
+      { label: "32px", value: "32px" },
+      { label: "48px", value: "48px" },
+      { label: "60px", value: "60px" },
+      { label: "72px", value: "72px" },
     ],
     textAlign: "center",
   },
@@ -433,13 +467,20 @@ export const typography = [
     label: "Line H",
     key: "line-height",
     control: OptionSelect,
-    options: ["1", "1.25", "1.5", "1.75", "2", "4"],
+    options: [
+      { label: "Choose option", value: "" },
+      { label: "1", value: "1" },
+      { label: "1.25", value: "1.25" },
+      { label: "1.5", value: "1.5" },
+      { label: "1.75", value: "1.75" },
+      { label: "2", value: "2" },
+      { label: "4", value: "4" },
+    ],
   },
   {
     label: "Color",
     key: "color",
     control: Colorpicker,
-    defaultValue: "#000",
   },
   {
     label: "align",
@@ -450,6 +491,7 @@ export const typography = [
       { icon: "ri-align-center", padding: "0px 5px", value: "center" },
       { icon: "ri-align-right", padding: "0px 5px", value: "right" },
       { icon: "ri-align-justify", padding: "0px 5px", value: "justify" },
+      { icon: "ri-close-line", value: "" },
     ],
   },
   {
@@ -460,16 +502,15 @@ export const typography = [
       { text: "BB", value: "uppercase" },
       { text: "Bb", value: "capitalize" },
       { text: "bb", value: "lowercase" },
-      { text: "×", value: "none" },
+      { icon: "ri-close-line", value: "" },
     ],
   },
   {
     label: "Decoration",
     key: "text-decoration-line",
     control: OptionSelect,
-    defaultValue: "None",
     options: [
-      { label: "None", value: "none" },
+      { label: "Choose option", value: "" },
       { label: "Underline", value: "underline" },
       { label: "Overline", value: "overline" },
       { label: "Line-through", value: "line-through" },
@@ -483,15 +524,14 @@ export const background = [
     label: "Color",
     key: "background",
     control: Colorpicker,
-    defaultValue: "#000",
   },
   {
     label: "Gradient",
     key: "background-image",
     control: OptionSelect,
-    defaultValue: "",
     options: [
       { label: "Select option", value: "" },
+      { label: "None", value: "none" },
       {
         label: "Warm Flame",
         value: "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);",
@@ -567,7 +607,7 @@ export const background = [
     label: "Image",
     key: "background",
     control: Input,
-    placeholder: "url",
+    placeholder: "URL",
   },
 ]
 
@@ -576,8 +616,8 @@ export const border = [
     label: "Radius",
     key: "border-radius",
     control: OptionSelect,
-    defaultValue: "None",
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0" },
       { label: "X Small", value: "0.125rem" },
       { label: "Small", value: "0.25rem" },
@@ -592,8 +632,8 @@ export const border = [
     label: "Width",
     key: "border-width",
     control: OptionSelect,
-    defaultValue: "None",
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0" },
       { label: "X Small", value: "0.5px" },
       { label: "Small", value: "1px" },
@@ -606,24 +646,23 @@ export const border = [
     label: "Color",
     key: "border-color",
     control: Colorpicker,
-    defaultValue: "#000",
   },
   {
     label: "Style",
     key: "border-style",
     control: OptionSelect,
-    defaultValue: "None",
     options: [
-      "None",
-      "Hidden",
-      "Dotted",
-      "Dashed",
-      "Solid",
-      "Double",
-      "Groove",
-      "Ridge",
-      "Inset",
-      "Outset",
+      { label: "Choose option", value: "" },
+      { label: "None", value: "none" },
+      { label: "Hidden", value: "hidden" },
+      { label: "Dotted", value: "dotted" },
+      { label: "Dashed", value: "dashed" },
+      { label: "Solid", value: "solid" },
+      { label: "Double", value: "double" },
+      { label: "Groove", value: "groove" },
+      { label: "Ridge", value: "ridge" },
+      { label: "Inset", value: "inset" },
+      { label: "Outset", value: "outset" },
     ],
   },
 ]
@@ -634,14 +673,22 @@ export const effects = [
     key: "opacity",
     control: OptionSelect,
     textAlign: "center",
-    options: ["0", "0.2", "0.4", "0.6", "0.8", "1"],
+    options: [
+      { label: "Choose option", value: "" },
+      { label: "0", value: "0" },
+      { label: "0.2", value: "0.2" },
+      { label: "0.4", value: "0.4" },
+      { label: "0.6", value: "0.6" },
+      { label: "0.8", value: "0.8" },
+      { label: "1", value: "1" },
+    ],
   },
   {
     label: "Rotate",
     key: "transform",
     control: OptionSelect,
-    defaultValue: "0",
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "0" },
       { label: "45 deg", value: "rotate(45deg)" },
       { label: "90 deg", value: "rotate(90deg)" },
@@ -657,8 +704,8 @@ export const effects = [
     label: "Shadow",
     key: "box-shadow",
     control: OptionSelect,
-    defaultValue: "None",
     options: [
+      { label: "Choose option", value: "" },
       { label: "None", value: "none" },
       { label: "X Small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
       {
@@ -691,19 +738,20 @@ export const transitions = [
     key: "transition-property",
     control: OptionSelect,
     options: [
-      "None",
-      "All",
-      "Background Color",
-      "Color",
-      "Font Size",
-      "Font Weight",
-      "Height",
-      "Margin",
-      "Opacity",
-      "Padding",
-      "Rotate",
-      "Shadow",
-      "Width",
+      { label: "Choose option", value: "" },
+      { label: "None", value: "none" },
+      { label: "All", value: "all" },
+      { label: "Background Color", value: "background color" },
+      { label: "Color", value: "color" },
+      { label: "Font Size", value: "font size" },
+      { label: "Font Weight", value: "font weight" },
+      { label: "Height", value: "height" },
+      { label: "Margin", value: "margin" },
+      { label: "Opacity", value: "opacity" },
+      { label: "Padding", value: "padding" },
+      { label: "Rotate", value: "rotate" },
+      { label: "Shadow", value: "shadow" },
+      { label: "Width", value: "width" },
     ],
   },
   {
@@ -712,13 +760,28 @@ export const transitions = [
     control: OptionSelect,
     textAlign: "center",
     placeholder: "sec",
-    options: ["0.4s", "0.6s", "0.8s", "1s", "2s", "4s"],
+    options: [
+      { label: "Choose option", value: "" },
+      { label: "0.4s", value: "0.4s" },
+      { label: "0.6s", value: "0.6s" },
+      { label: "0.8s", value: "0.8s" },
+      { label: "1s", value: "1s" },
+      { label: "2s", value: "2s" },
+      { label: "4s", value: "4s" },
+    ],
   },
   {
     label: "Ease",
-    key: "transition-timing-function:",
+    key: "transition-timing-function",
     control: OptionSelect,
-    options: ["linear", "ease", "ease-in", "ease-out", "ease-in-out"],
+    options: [
+      { label: "Choose option", value: "" },
+      { label: "Linear", value: "linear" },
+      { label: "Ease", value: "ease" },
+      { label: "Ease in", value: "ease-in" },
+      { label: "Ease out", value: "ease-out" },
+      { label: "Ease in out", value: "ease-in-out" },
+    ],
   },
 ]
 
@@ -744,3 +807,13 @@ export function excludeProps(props, propsToExclude) {
   }
   return modifiedProps
 }
+
+let defaultStyles = {}
+Object.values(all).forEach(category => {
+  category.forEach(prop => {
+    if (prop.initialValue) {
+      defaultStyles[prop.key] = prop.initialValue
+    }
+  })
+})
+export const defaults = defaultStyles