diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
index c386a52cb7..74f0c930cd 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ConditionalUIDrawer.svelte
@@ -56,7 +56,11 @@
   ]
 
   let dragDisabled = true
-  $: settings = getComponentSettings($selectedComponent?._component)
+  $: settings = getComponentSettings($selectedComponent?._component)?.concat({
+    label: "Custom CSS",
+    key: "_css",
+    type: "text",
+  })
   $: settingOptions = settings.map(setting => ({
     label: setting.label,
     value: setting.key,
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/CustomStylesSection.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/CustomStylesSection.svelte
index 187d9ff760..1c7eddc476 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/CustomStylesSection.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/CustomStylesSection.svelte
@@ -1,30 +1,41 @@
 <script>
   import {
-    TextArea,
     DetailSummary,
     ActionButton,
     Drawer,
-    DrawerContent,
-    Layout,
-    Body,
     Button,
     notifications,
   } from "@budibase/bbui"
-  import { store } from "builderStore"
+  import { selectedScreen, store } from "builderStore"
+  import ClientBindingPanel from "components/common/bindings/ClientBindingPanel.svelte"
+  import {
+    getBindableProperties,
+    readableToRuntimeBinding,
+    runtimeToReadableBinding,
+  } from "builderStore/dataBinding"
 
   export let componentInstance
 
   let tempValue
   let drawer
 
+  $: bindings = getBindableProperties(
+    $selectedScreen,
+    $store.selectedComponentId
+  )
+
   const openDrawer = () => {
-    tempValue = componentInstance?._styles?.custom
+    tempValue = runtimeToReadableBinding(
+      bindings,
+      componentInstance?._styles?.custom
+    )
     drawer.show()
   }
 
   const save = async () => {
     try {
-      await store.actions.components.updateCustomStyle(tempValue)
+      const value = readableToRuntimeBinding(bindings, tempValue)
+      await store.actions.components.updateCustomStyle(value)
     } catch (error) {
       notifications.error("Error updating custom style")
     }
@@ -42,26 +53,17 @@
 </DetailSummary>
 {#key componentInstance?._id}
   <Drawer bind:this={drawer} title="Custom CSS">
+    <svelte:fragment slot="description">
+      Custom CSS overrides all other component styles.
+    </svelte:fragment>
     <Button cta slot="buttons" on:click={save}>Save</Button>
-    <DrawerContent slot="body">
-      <div class="content">
-        <Layout gap="S" noPadding>
-          <Body size="S">Custom CSS overrides all other component styles.</Body>
-          <TextArea bind:value={tempValue} placeholder="Enter some CSS..." />
-        </Layout>
-      </div>
-    </DrawerContent>
+    <svelte:component
+      this={ClientBindingPanel}
+      slot="body"
+      value={tempValue}
+      on:change={event => (tempValue = event.detail)}
+      allowJS
+      {bindings}
+    />
   </Drawer>
 {/key}
-
-<style>
-  .content {
-    max-width: 800px;
-    margin: 0 auto;
-  }
-  .content :global(textarea) {
-    font-family: monospace;
-    min-height: 240px !important;
-    font-size: var(--font-size-s);
-  }
-</style>
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index b72fa16216..2d586df24d 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -142,6 +142,10 @@
   // Determine and apply settings to the component
   $: applySettings(staticSettings, enrichedSettings, conditionalSettings)
 
+  // Determine custom css.
+  // Broken out as a separate variable to minimize reactivity updates.
+  $: customCSS = cachedSettings?._css
+
   // Scroll the selected element into view
   $: selected && scrollIntoView()
 
@@ -151,6 +155,7 @@
     children: children.length,
     styles: {
       ...instance._styles,
+      custom: customCSS,
       id,
       empty: emptyState,
       interactive,
@@ -249,14 +254,18 @@
     // Get raw settings
     let settings = {}
     Object.entries(instance)
-      .filter(([name]) => name === "_conditions" || !name.startsWith("_"))
+      .filter(([name]) => !name.startsWith("_"))
       .forEach(([key, value]) => {
         settings[key] = value
       })
-
-    // Derive static, dynamic and nested settings if the instance changed
     let newStaticSettings = { ...settings }
     let newDynamicSettings = { ...settings }
+
+    // Attach some internal properties
+    newDynamicSettings["_conditions"] = instance._conditions
+    newDynamicSettings["_css"] = instance._styles?.custom
+
+    // Derive static, dynamic and nested settings if the instance changed
     settingsDefinition?.forEach(setting => {
       if (setting.nested) {
         delete newDynamicSettings[setting.key]
@@ -370,6 +379,11 @@
           // setting it on initialSettings directly, we avoid a double render.
           cachedSettings[key] = allSettings[key]
 
+          // Don't update components for internal properties
+          if (key.startsWith("_")) {
+            return
+          }
+
           if (ref?.$$set) {
             // Programmatically set the prop to avoid svelte reactive statements
             // firing inside components. This circumvents the problems caused by
