diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/componentStyles.js b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/componentStyles.js
index 710cbed9b1..d4912241b3 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/componentStyles.js
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/componentStyles.js
@@ -1,67 +1,6 @@
 import { Input, Select } from "@budibase/bbui"
 import ColorPicker from "components/design/settings/controls/ColorPicker.svelte"
 
-export const grid = {
-  label: "Grid",
-  columns: "1fr 1fr",
-  settings: [
-    {
-      label: "Col. start",
-      key: "grid-column-start",
-      control: Select,
-      placeholder: "Auto",
-      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-    },
-    {
-      label: "Col. end",
-      key: "grid-column-end",
-      control: Select,
-      placeholder: "Auto",
-      options: [
-        { label: "1", value: 2 },
-        { label: "2", value: 3 },
-        { label: "3", value: 4 },
-        { label: "4", value: 5 },
-        { label: "5", value: 6 },
-        { label: "6", value: 7 },
-        { label: "7", value: 8 },
-        { label: "8", value: 9 },
-        { label: "9", value: 10 },
-        { label: "10", value: 11 },
-        { label: "11", value: 12 },
-        { label: "12", value: 13 },
-      ],
-    },
-    {
-      label: "Row start",
-      key: "grid-row-start",
-      control: Select,
-      placeholder: "Auto",
-      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
-    },
-    {
-      label: "Row end",
-      key: "grid-row-end",
-      control: Select,
-      placeholder: "Auto",
-      options: [
-        { label: "1", value: 2 },
-        { label: "2", value: 3 },
-        { label: "3", value: 4 },
-        { label: "4", value: 5 },
-        { label: "5", value: 6 },
-        { label: "6", value: 7 },
-        { label: "7", value: 8 },
-        { label: "8", value: 9 },
-        { label: "9", value: 10 },
-        { label: "10", value: 11 },
-        { label: "11", value: 12 },
-        { label: "12", value: 13 },
-      ],
-    },
-  ],
-}
-
 export const margin = {
   label: "Margin",
   columns: "1fr 1fr",
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index dc2f8c1d5f..e87efacd4c 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -170,26 +170,23 @@
   $: pad = pad || (interactive && hasChildren && inDndPath)
   $: $dndIsDragging, (pad = false)
 
-  // Compute overall styles
-  $: styles = {
-    ...instance._styles,
-    normal: {
-      ...instance._styles?.normal,
-      ...ephemeralStyles,
-    },
-    custom: customCSS,
-    id,
-    empty: emptyState,
-    interactive,
-    draggable,
-    editable,
-  }
-
   // Update component context
   $: store.set({
     id,
     children: children.length,
-    styles,
+    styles: {
+      ...instance._styles,
+      normal: {
+        ...instance._styles?.normal,
+        ...ephemeralStyles,
+      },
+      custom: customCSS,
+      id,
+      empty: emptyState,
+      interactive,
+      draggable,
+      editable,
+    },
     empty: emptyState,
     selected,
     name,
@@ -458,7 +455,6 @@
       componentStore.actions.registerInstance(id, {
         component: instance._component,
         getSettings: () => cachedSettings,
-        getStyles: () => styles,
         getRawSettings: () => ({ ...staticSettings, ...dynamicSettings }),
         getDataContext: () => get(context),
         reload: () => initialise(instance, true),