diff --git a/packages/builder/package.json b/packages/builder/package.json
index fba1b1f405..e681253de8 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@beyonk/svelte-notifications": "^2.0.3",
-    "@budibase/bbui": "^1.9.0",
+    "@budibase/bbui": "^1.10.1",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",
diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css
index 12ae85f240..b40029e230 100644
--- a/packages/builder/src/budibase.css
+++ b/packages/builder/src/budibase.css
@@ -57,13 +57,14 @@
 .budibase__nav-item {
     cursor: pointer;
     padding: 0 4px 0 2px;
-    height: 40px;
+    height: 36px;
     margin: 0px 0px 0px 0px;
     border-radius: 5px;
     display: flex;
     align-items: center;
     font-size: 14px;
     transition: 0.2s;
+    border-top: var(--grey-1) .5px solid;
 }
 
 .budibase__nav-item.selected {
@@ -76,7 +77,7 @@
 }
 
 .budibase__input {
-    height: 35px;
+    height: 36px;
     width: 220px;
     border-radius: 3px;
     border: 1px solid var(--grey-4);
diff --git a/packages/builder/src/components/common/Input.svelte b/packages/builder/src/components/common/Input.svelte
index fb58019bec..2797092d07 100644
--- a/packages/builder/src/components/common/Input.svelte
+++ b/packages/builder/src/components/common/Input.svelte
@@ -35,19 +35,18 @@
 <style>
   input {
     /* width: 32px; */
-    height: 32px;
-    font-size: 12px;
-    font-weight: 500;
+    height: 36px;
+    font-size: 14px;
+    font-weight: 400;
     margin: 0px 0px 0px 2px;
     color: var(--ink);
-    opacity: 0.7;
-    padding: 0px 4px;
-    line-height: 1.3;
+    padding: 0px 8px;
+    font-family: inter;
     width: 164px;
     box-sizing: border-box;
-    background-color: var(--grey-3);
+    background-color: var(--grey-2);
     border-radius: 4px;
-    border: 1px solid var(--grey-3);
+    border: 1px solid var(--grey-2);
     outline: none;
   }
 
diff --git a/packages/builder/src/components/nav/UsersList.svelte b/packages/builder/src/components/nav/UsersList.svelte
index faef8a4234..682c3e91e0 100644
--- a/packages/builder/src/components/nav/UsersList.svelte
+++ b/packages/builder/src/components/nav/UsersList.svelte
@@ -65,7 +65,6 @@
     margin: 0 0 0 6px;
     padding: 0;
     border: none;
-    font-family: Roboto;
     font-size: 13px;
     outline: none;
     cursor: pointer;
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
index ff3cf5300c..cb9fa9d8ec 100644
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
@@ -39,7 +39,7 @@
       <div
         class="budibase__nav-item item"
         class:selected={currentComponent === component}
-        style="padding-left: {level * 16 + 32}px">
+        style="padding-left: {level * 20 + 40}px">
         <div class="nav-item">
           <i class="icon ri-arrow-right-circle-fill" />
           {get_capitalised_name(component._component)}
@@ -73,7 +73,7 @@
     padding: 0px 5px 0px 15px;
     margin: auto 0px;
     border-radius: 3px;
-    height: 35px;
+    height: 36px;
     align-items: center;
   }
 
diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte
index b7bd31cc15..cffa75fd8b 100644
--- a/packages/builder/src/components/userInterface/FlatButton.svelte
+++ b/packages/builder/src/components/userInterface/FlatButton.svelte
@@ -46,6 +46,6 @@
   }
 
   i {
-    font-size: 20px;
+    font-size: 16px;
   }
 </style>
diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js
index 407483f70f..82f12517d0 100644
--- a/packages/builder/src/components/userInterface/propertyCategories.js
+++ b/packages/builder/src/components/userInterface/propertyCategories.js
@@ -14,7 +14,7 @@ export const layout = [
     control: OptionSelect,
     initialValue: "",
     options: [
-      { label: " ", value: " " },
+      { label: "N/A ", value: "N/A" },
       { label: "Flex", value: "flex" },
       { label: "Inline Flex", value: "inline-flex" },
     ],
@@ -80,20 +80,169 @@ const spacingMeta = [
   { placeholder: "L" },
 ]
 
-export const spacing = [
+export const margin = [
   {
-    label: "Margin",
+    label: "All sides",
     key: "margin",
-    control: InputGroup,
-    meta: spacingMeta,
-    defaultValue: ["0", "0", "0", "0"],
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+      { label: "Auto", value: "auto" },
+      { label: "100%", value: "100%" },
+    ],
   },
   {
-    label: "Padding",
+    label: "Top",
+    key: "margin-top",
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+      { label: "Auto", value: "auto" },
+      { label: "100%", value: "100%" },
+    ],
+  },
+  {
+    label: "Right",
+    key: "margin-right",
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+      { label: "Auto", value: "auto" },
+      { label: "100%", value: "100%" },
+    ],
+  },
+  {
+    label: "Bottom",
+    key: "padding-bottom",
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+      { label: "Auto", value: "auto" },
+      { label: "100%", value: "100%" },
+    ],
+  },
+  {
+    label: "Left",
+    key: "margin-left",
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+      { label: "Auto", value: "auto" },
+      { label: "100%", value: "100%" },
+    ],
+  },
+]
+
+export const padding = [
+  {
+    label: "All sides",
     key: "padding",
-    control: InputGroup,
-    meta: spacingMeta,
-    defaultValue: ["0", "0", "0", "0"],
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+      { label: "Auto", value: "auto" },
+      { label: "100%", value: "100%" },
+    ],
+  },
+  {
+    label: "Top",
+    key: "padding-top",
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+      { label: "Auto", value: "auto" },
+      { label: "100%", value: "100%" },
+    ],
+  },
+  {
+    label: "Right",
+    key: "padding-right",
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+      { label: "Auto", value: "auto" },
+      { label: "100%", value: "100%" },
+    ],
+  },
+  {
+    label: "Bottom",
+    key: "padding-bottom",
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+      { label: "Auto", value: "auto" },
+      { label: "100%", value: "100%" },
+    ],
+  },
+  {
+    label: "Left",
+    key: "padding-left",
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+      { label: "Auto", value: "auto" },
+      { label: "100%", value: "100%" },
+    ],
   },
 ]
 
@@ -113,28 +262,28 @@ export const size = [
     textAlign: "center",
   },
   {
-    label: "Min W",
+    label: "Min Width",
     key: "min-width",
     control: Input,
     placeholder: "px",
     textAlign: "center",
   },
   {
-    label: "Min H",
-    key: "min-height",
-    control: Input,
-    placeholder: "px",
-    textAlign: "center",
-  },
-  {
-    label: "Max W",
+    label: "Max Width",
     key: "max-width",
     control: Input,
     placeholder: "px",
     textAlign: "center",
   },
   {
-    label: "Max H",
+    label: "Min Height",
+    key: "min-height",
+    control: Input,
+    placeholder: "px",
+    textAlign: "center",
+  },
+  {
+    label: "Max Height",
     key: "max-height",
     control: Input,
     placeholder: "px",
@@ -147,8 +296,9 @@ export const position = [
     label: "Position",
     key: "position",
     control: OptionSelect,
-    initialValue: "Wrap",
+    initialValue: "None",
     options: [
+      { label: "None", value: "none" },
       { label: "Static", value: "static" },
       { label: "Relative", value: "relative" },
       { label: "Fixed", value: "fixed" },
@@ -187,9 +337,8 @@ export const position = [
   {
     label: "Z-index",
     key: "z-index",
-    control: Input,
-    placeholder: "num",
-    textAlign: "center",
+    control: OptionSelect,
+    options: ["-9999", "-3", "-2", "-1", "0", "1", "2", "3", "9999"],
   },
 ]
 
@@ -228,17 +377,15 @@ export const typography = [
   {
     label: "size",
     key: "font-size",
-    defaultValue: "",
-    control: Input,
-    placeholder: "px",
+    control: OptionSelect,
+    options: ["8px", "10px", "12px", "14px", "16px", "18px", "20px", "24px", "32px", "48px", "60px", "72px"],
     textAlign: "center",
   },
   {
     label: "Line H",
     key: "line-height",
-    control: Input,
-    placeholder: "lh",
-    textAlign: "center",
+    control: OptionSelect,
+    options: ["1", "1.25", "1.5", "1.75", "2", "4"],
   },
   {
     label: "Color",
@@ -272,10 +419,10 @@ export const typography = [
     label: "Decoration",
     key: "text-decoration-line",
     control: OptionSelect,
-    defaultValue: "Underline",
+    defaultValue: "None",
     options: [
-      { label: "Underline", value: "underline" },
       { label: "None", value: "none" },
+      { label: "Underline", value: "underline" },
       { label: "Overline", value: "overline" },
       { label: "Line-through", value: "line-through" },
       { label: "Under Over", value: "underline overline" },
@@ -290,11 +437,31 @@ export const background = [
     control: Colorpicker,
     defaultValue: "#000",
   },
+  {
+    label: "Gradient",
+    key: "background-image",
+    control: OptionSelect,
+    defaultValue: "None",
+    options: [
+      { label: "None", value: "None" },
+      { label: "Warm Flame", value: "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);" },
+      { label: "Night Fade", value: "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);" },
+      { label: "Spring Warmth", value: "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);" },
+      { label: "Sunny Morning", value: "linear-gradient(120deg, #f6d365 0%, #fda085 100%);" },
+      { label: "Winter Neva", value: "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);" },
+      { label: "Tempting Azure", value: "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);" },
+      { label: "Heavy Rain", value: "linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);" },
+      { label: "Deep Blue", value: "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);" },
+      { label: "Near Moon", value: "linear-gradient(to top, #5ee7df 0%, #b490ca 100%);" },
+      { label: "Wild Apple", value: "linear-gradient(to top, #d299c2 0%, #fef9d7 100%);" },
+      { label: "Plum Plate", value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%);" },
+    ],
+  },
   {
     label: "Image",
     key: "background-image",
     control: Input,
-    placeholder: "src",
+    placeholder: "Src",
   },
 ]
 
@@ -306,11 +473,13 @@ export const border = [
     defaultValue: "None",
     options: [
       { label: "None", value: "0" },
-      { label: "small", value: "0.125rem" },
-      { label: "Medium", value: "0.25rem;" },
-      { label: "Large", value: "0.375rem" },
-      { label: "Extra large", value: "0.5rem" },
-      { label: "Full", value: "5678px" },
+      { label: "X Small", value: "0.125rem" },
+      { label: "Small", value: "0.25rem" },
+      { label: "Medium", value: "0.5rem" },
+      { label: "Large", value: "1rem" },
+      { label: "X Large", value: "2rem" },
+      { label: "XX Large", value: "4rem" },
+      { label: "Round", value: "5678px" },
     ],
   },
   {
@@ -320,11 +489,11 @@ export const border = [
     defaultValue: "None",
     options: [
       { label: "None", value: "0" },
-      { label: "Extra small", value: "0.5px" },
+      { label: "X Small", value: "0.5px" },
       { label: "Small", value: "1px" },
       { label: "Medium", value: "2px" },
       { label: "Large", value: "4px" },
-      { label: "Extra large", value: "8px" },
+      { label: "X large", value: "8px" },
     ],
   },
   {
@@ -339,16 +508,16 @@ export const border = [
     control: OptionSelect,
     defaultValue: "None",
     options: [
-      "none",
-      "hidden",
-      "dotted",
-      "dashed",
-      "solid",
-      "double",
-      "groove",
-      "ridge",
-      "inset",
-      "outset",
+      "None",
+      "Hidden",
+      "Dotted",
+      "Dashed",
+      "Solid",
+      "Double",
+      "Groove",
+      "Ridge",
+      "Inset",
+      "Outset",
     ],
   },
 ]
@@ -357,28 +526,34 @@ export const effects = [
   {
     label: "Opacity",
     key: "opacity",
-    control: Input,
-    width: "48px",
+    control: OptionSelect,
     textAlign: "center",
-    placeholder: "%",
+    options: [
+      "0",
+      "0.2",
+      "0.4",
+      "0.6",
+      "0.8",
+      "1",
+    ],
   },
   {
     label: "Rotate",
-    key: "transform-rotate",
+    key: "transform",
     control: OptionSelect,
     defaultValue: "0",
     options: [
-      "0",
-      "45deg",
-      "90deg",
-      "90deg",
-      "135deg",
-      "180deg",
-      "225deg",
-      "270deg",
-      "315dev",
+      { label: "None", value: "0" },
+      { label: "45 deg", value:"rotate(45deg)" },
+      { label: "90 deg", value:"rotate(90deg)" },
+      { label: "135 deg", value:"rotate(135deg)" },
+      { label: "180 deg", value:"rotate(180deg)" },
+      { label: "225 deg", value:"rotate(225deg)" },
+      { label: "270 deg", value:"rotate(270deg)" },
+      { label: "315 deg", value:"rotate(315deg)" },
+      { label: "360 deg", value:"rotate(360deg)" },
     ],
-  }, //needs special control
+  }, 
   {
     label: "Shadow",
     key: "box-shadow",
@@ -386,7 +561,7 @@ export const effects = [
     defaultValue: "None",
     options: [
       { label: "None", value: "none" },
-      { label: "Extra small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
+      { label: "X Small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
       {
         label: "Small",
         value:
@@ -403,7 +578,7 @@ export const effects = [
           "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
       },
       {
-        label: "Extra large",
+        label: "X Large",
         value:
           "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
       },
@@ -435,10 +610,10 @@ export const transitions = [
   {
     label: "Duration",
     key: "transition-duration",
-    control: Input,
-    width: "48px",
+    control: OptionSelect,
     textAlign: "center",
     placeholder: "sec",
+    options: ["0.2ms", "0.4ms", "0.8ms", "1s", "2s", "4s",],
   },
   {
     label: "Ease",
@@ -450,7 +625,8 @@ export const transitions = [
 
 export const all = {
   layout,
-  spacing,
+  margin,
+  padding,
   size,
   position,
   typography,
diff --git a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
index 25a5bb5c21..bd59b0c479 100644
--- a/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/SetupPanel.svelte
@@ -184,7 +184,7 @@
   }
 
   .budibase_input {
-    height: 35px;
+    height: 36px;
     width: 244px;
     border-radius: 3px;
     background-color: var(--grey-2);
diff --git a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
index 9c0cf8bc3a..20ab71c23a 100644
--- a/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
+++ b/packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte
@@ -73,7 +73,7 @@
   }
 
   .budibase_input {
-    height: 35px;
+    height: 36px;
     width: 220px;
     border-radius: 3px;
     border: 1px solid var(--grey-4);
diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css
index 3f78b1b80d..ab01825dd2 100644
--- a/packages/builder/src/global.css
+++ b/packages/builder/src/global.css
@@ -39,7 +39,7 @@
 
 html, body {
     display: grid;
-    font-family: var(--font-normal);
+    font-family: inter;
     color: var(--ink);
     padding: 0;
     margin: 0;
diff --git a/packages/standard-components/public/global.css b/packages/standard-components/public/global.css
index efd77ef4c2..fee35ba5c5 100644
--- a/packages/standard-components/public/global.css
+++ b/packages/standard-components/public/global.css
@@ -9,7 +9,7 @@ body {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
-	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
 }
 
 a {
diff --git a/packages/standard-components/src/DataList.svelte b/packages/standard-components/src/DataList.svelte
index 03bcd5ccc4..1e71f706d5 100644
--- a/packages/standard-components/src/DataList.svelte
+++ b/packages/standard-components/src/DataList.svelte
@@ -53,7 +53,7 @@
   .list {
     display: flex;
     flex-direction: column;
-    font-family: Roboto;
+    font-family: Inter;
   }
 
   .grid {