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..9f4dbbbde5 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: "CSS",
+    key: "css",
+    type: "text",
+  })
   $: settingOptions = settings.map(setting => ({
     label: setting.label,
     value: setting.key,
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index a7f506a387..f72f989920 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -379,6 +379,9 @@
           // initial props are up to date. By setting it this way rather than
           // setting it on initialSettings directly, we avoid a double render.
           cachedSettings[key] = allSettings[key]
+          if (key === "css") {
+            instance._styles.custom = cachedSettings[key]
+          }
 
           if (ref?.$$set) {
             // Programmatically set the prop to avoid svelte reactive statements