diff --git a/packages/builder/package.json b/packages/builder/package.json
index d2d9cdb11b..8fe9ffd494 100644
--- a/packages/builder/package.json
+++ b/packages/builder/package.json
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@beyonk/svelte-notifications": "^2.0.3",
-    "@budibase/bbui": "^0.3.7",
+    "@budibase/bbui": "^1.1.1",
     "@budibase/client": "^0.0.32",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte
index a51607833a..b181b406a7 100644
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@@ -1,6 +1,7 @@
 <script>
   import { excludeProps } from "./propertyCategories.js"
   import PropertyControl from "./PropertyControl.svelte"
+  import { DetailSummary } from "@budibase/bbui"
 
   export let name = ""
   export let styleCategory = "normal"
@@ -8,79 +9,17 @@
   export let componentInstance = {}
   export let onStyleChanged = () => {}
 
-  export let show = false
-
-  const capitalize = name => name[0].toUpperCase() + name.slice(1)
-
-  $: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
   $: style = componentInstance["_styles"][styleCategory] || {}
 </script>
 
-<div class="property-group-container">
-  <div class="property-group-name" on:click={() => (show = !show)}>
-    <div class="icon">
-      <i class={icon} />
-    </div>
-    <div class="name">{capitalize(name)}</div>
-  </div>
-  <div class="property-panel" class:show>
-
-    {#each properties as props}
-      <PropertyControl
-        label={props.label}
-        control={props.control}
-        key={props.key}
-        value={style[props.key]}
-        onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
-        props={{ ...excludeProps(props, ['control', 'label']) }} />
-    {/each}
-  </div>
-</div>
-
-<style>
-  .property-group-container {
-    display: flex;
-    flex-direction: column;
-    height: auto;
-    background: var(--grey-light);
-    margin: 0px 0px 4px 0px;
-    padding: 8px 12px;
-    justify-content: center;
-    border-radius: 4px;
-  }
-
-  .property-group-name {
-    cursor: pointer;
-    display: flex;
-    flex-flow: row nowrap;
-  }
-
-  .name {
-    flex: 1;
-    text-align: left;
-    padding-top: 2px;
-    font-size: 14px;
-    font-weight: 500;
-    letter-spacing: 0.14px;
-    color: var(--ink);
-  }
-
-  .icon {
-    flex: 0 0 20px;
-    text-align: center;
-  }
-
-  .property-panel {
-    /* height: 0px;
-    overflow: hidden; */
-    display: none;
-  }
-
-  .show {
-    /* overflow: auto;
-    height: auto; */
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-  }
-</style>
+<DetailSummary {name}>
+  {#each properties as props}
+    <PropertyControl
+      label={props.label}
+      control={props.control}
+      key={props.key}
+      value={style[props.key]}
+      onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
+      props={{ ...excludeProps(props, ['control', 'label']) }} />
+  {/each}
+</DetailSummary>