diff --git a/packages/client/src/components/Block.svelte b/packages/client/src/components/Block.svelte
index b382062787..05d92f208c 100644
--- a/packages/client/src/components/Block.svelte
+++ b/packages/client/src/components/Block.svelte
@@ -4,6 +4,7 @@
   import { blockStore } from "stores/blocks.js"
 
   const component = getContext("component")
+  const { styleable } = getContext("sdk")
 
   let structureLookupMap = {}
 
@@ -18,8 +19,21 @@
   }
 
   const eject = () => {
-    // Start the new structure with the first top level component
+    // Start the new structure with the root component
     let definition = structureLookupMap[$component.id][0]
+
+    // Copy styles from block to root component
+    definition._styles = {
+      ...definition._styles,
+      normal: {
+        ...definition._styles?.normal,
+        ...$component.styles?.normal,
+      },
+      custom:
+        definition._styles?.custom || "" + $component.styles?.custom || "",
+    }
+
+    // Create component tree
     attachChildren(definition, structureLookupMap)
     builderStore.actions.ejectBlock($component.id, definition)
   }
@@ -73,4 +87,6 @@
   })
 </script>
 
-<slot />
+<div use:styleable={$component.styles}>
+  <slot />
+</div>
diff --git a/packages/client/src/components/BlockComponent.svelte b/packages/client/src/components/BlockComponent.svelte
index fe2eb0bd02..95016c4847 100644
--- a/packages/client/src/components/BlockComponent.svelte
+++ b/packages/client/src/components/BlockComponent.svelte
@@ -7,7 +7,6 @@
   export let type
   export let props
   export let styles
-  export let css
   export let context
   export let order = 0
   export let containsSlot = false
@@ -27,12 +26,7 @@
     _component: `@budibase/standard-components/${type}`,
     _id: id,
     _instanceName: type[0].toUpperCase() + type.slice(1),
-    _styles: {
-      normal: {
-        ...styles,
-      },
-      custom: css,
-    },
+    _styles: styles,
     _containsSlot: containsSlot,
     ...props,
   }
diff --git a/packages/client/src/components/app/blocks/CardsBlock.svelte b/packages/client/src/components/app/blocks/CardsBlock.svelte
index 789aa76c1b..9c110d7097 100644
--- a/packages/client/src/components/app/blocks/CardsBlock.svelte
+++ b/packages/client/src/components/app/blocks/CardsBlock.svelte
@@ -2,7 +2,6 @@
   import { getContext } from "svelte"
   import Block from "components/Block.svelte"
   import BlockComponent from "components/BlockComponent.svelte"
-  import { Heading } from "@budibase/bbui"
   import { makePropSafe as safe } from "@budibase/string-templates"
   import { enrichSearchColumns, enrichFilter } from "utils/blocks.js"
 
@@ -31,9 +30,7 @@
   export let cardButtonOnClick
   export let linkColumn
 
-  const { fetchDatasourceSchema, styleable } = getContext("sdk")
-  const context = getContext("context")
-  const component = getContext("component")
+  const { fetchDatasourceSchema } = getContext("sdk")
 
   let formId
   let dataProviderId
@@ -84,126 +81,132 @@
 
 {#if schemaLoaded}
   <Block>
-    <div use:styleable={$component.styles}>
-      <BlockComponent
-        type="form"
-        bind:id={formId}
-        props={{ dataSource, disableValidation: true }}
-      >
-        {#if title || enrichedSearchColumns?.length || showTitleButton}
+    <BlockComponent
+      type="form"
+      bind:id={formId}
+      props={{ dataSource, disableValidation: true }}
+    >
+      {#if title || enrichedSearchColumns?.length || showTitleButton}
+        <BlockComponent
+          type="container"
+          props={{
+            direction: "row",
+            hAlign: "stretch",
+            vAlign: "middle",
+            gap: "M",
+            wrap: true,
+          }}
+          styles={{
+            normal: {
+              "margin-bottom": "20px",
+            },
+          }}
+          order={0}
+        >
+          <BlockComponent
+            type="heading"
+            props={{
+              text: title,
+            }}
+            order={0}
+          />
           <BlockComponent
             type="container"
             props={{
               direction: "row",
-              hAlign: "stretch",
+              hAlign: "left",
               vAlign: "middle",
               gap: "M",
               wrap: true,
             }}
-            styles={{
-              "margin-bottom": "20px",
-            }}
-            order={0}
+            order={1}
           >
-            <BlockComponent
-              type="heading"
-              props={{
-                text: title,
-              }}
-              order={0}
-            />
-            <BlockComponent
-              type="container"
-              props={{
-                direction: "row",
-                hAlign: "left",
-                vAlign: "middle",
-                gap: "M",
-                wrap: true,
-              }}
-              order={1}
-            >
-              {#if enrichedSearchColumns?.length}
-                {#each enrichedSearchColumns as column, idx}
-                  <BlockComponent
-                    type={column.componentType}
-                    props={{
-                      field: column.name,
-                      placeholder: column.name,
-                      text: column.name,
-                      autoWidth: true,
-                    }}
-                    order={idx}
-                    styles={{
-                      width: "192px",
-                    }}
-                  />
-                {/each}
-              {/if}
-              {#if showTitleButton}
+            {#if enrichedSearchColumns?.length}
+              {#each enrichedSearchColumns as column, idx}
                 <BlockComponent
-                  type="button"
+                  type={column.componentType}
                   props={{
-                    onClick: titleButtonAction,
-                    text: titleButtonText,
-                    type: "cta",
+                    field: column.name,
+                    placeholder: column.name,
+                    text: column.name,
+                    autoWidth: true,
+                  }}
+                  order={idx}
+                  styles={{
+                    normal: {
+                      width: "192px",
+                    },
                   }}
-                  order={enrichedSearchColumns?.length ?? 0}
                 />
-              {/if}
-            </BlockComponent>
-          </BlockComponent>
-        {/if}
-        <BlockComponent
-          type="dataprovider"
-          bind:id={dataProviderId}
-          props={{
-            dataSource,
-            filter: enrichedFilter,
-            sortColumn,
-            sortOrder,
-            paginate,
-            limit,
-          }}
-          order={1}
-        >
-          <BlockComponent
-            type="repeater"
-            bind:id={repeaterId}
-            context="repeater"
-            props={{
-              dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
-              direction: "row",
-              hAlign: "stretch",
-              vAlign: "top",
-              gap: "M",
-              noRowsMessage: "No rows found",
-            }}
-            css={`display: grid;\ngrid-template-columns: repeat(auto-fill, minmax(min(${cardWidth}px, 100%), 1fr));`}
-            order={0}
-          >
-            <BlockComponent
-              type="spectrumcard"
-              props={{
-                title: cardTitle,
-                subtitle: cardSubtitle,
-                description: cardDescription,
-                imageURL: cardImageURL,
-                horizontal: cardHorizontal,
-                showButton: showCardButton,
-                buttonText: cardButtonText,
-                buttonOnClick: cardButtonOnClick,
-                linkURL: fullCardURL,
-                linkPeek: cardPeek,
-              }}
-              styles={{
-                width: "auto",
-              }}
-              order={0}
-            />
+              {/each}
+            {/if}
+            {#if showTitleButton}
+              <BlockComponent
+                type="button"
+                props={{
+                  onClick: titleButtonAction,
+                  text: titleButtonText,
+                  type: "cta",
+                }}
+                order={enrichedSearchColumns?.length ?? 0}
+              />
+            {/if}
           </BlockComponent>
         </BlockComponent>
+      {/if}
+      <BlockComponent
+        type="dataprovider"
+        bind:id={dataProviderId}
+        props={{
+          dataSource,
+          filter: enrichedFilter,
+          sortColumn,
+          sortOrder,
+          paginate,
+          limit,
+        }}
+        order={1}
+      >
+        <BlockComponent
+          type="repeater"
+          bind:id={repeaterId}
+          context="repeater"
+          props={{
+            dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
+            direction: "row",
+            hAlign: "stretch",
+            vAlign: "top",
+            gap: "M",
+            noRowsMessage: "No rows found",
+          }}
+          styles={{
+            custom: `display: grid;\ngrid-template-columns: repeat(auto-fill, minmax(min(${cardWidth}px, 100%), 1fr));`,
+          }}
+          order={0}
+        >
+          <BlockComponent
+            type="spectrumcard"
+            props={{
+              title: cardTitle,
+              subtitle: cardSubtitle,
+              description: cardDescription,
+              imageURL: cardImageURL,
+              horizontal: cardHorizontal,
+              showButton: showCardButton,
+              buttonText: cardButtonText,
+              buttonOnClick: cardButtonOnClick,
+              linkURL: fullCardURL,
+              linkPeek: cardPeek,
+            }}
+            styles={{
+              normal: {
+                width: "auto",
+              },
+            }}
+            order={0}
+          />
+        </BlockComponent>
       </BlockComponent>
-    </div>
+    </BlockComponent>
   </Block>
 {/if}
diff --git a/packages/client/src/components/app/blocks/RepeaterBlock.svelte b/packages/client/src/components/app/blocks/RepeaterBlock.svelte
index c7e8f28dd7..30fbdddcdc 100644
--- a/packages/client/src/components/app/blocks/RepeaterBlock.svelte
+++ b/packages/client/src/components/app/blocks/RepeaterBlock.svelte
@@ -17,46 +17,43 @@
   export let vAlign
   export let gap
 
-  let providerId
-
   const component = getContext("component")
-  const { styleable } = getContext("sdk")
+
+  let providerId
 </script>
 
 <Block>
-  <div use:styleable={$component.styles}>
-    <BlockComponent
-      type="dataprovider"
-      context="provider"
-      bind:id={providerId}
-      props={{
-        dataSource,
-        filter,
-        sortColumn,
-        sortOrder,
-        limit,
-        paginate,
-      }}
-    >
-      {#if $component.empty}
-        <Placeholder />
-      {:else}
-        <BlockComponent
-          type="repeater"
-          context="repeater"
-          containsSlot
-          props={{
-            dataProvider: `{{ literal ${safe(providerId)} }}`,
-            noRowsMessage,
-            direction,
-            hAlign,
-            vAlign,
-            gap,
-          }}
-        >
-          <slot />
-        </BlockComponent>
-      {/if}
-    </BlockComponent>
-  </div>
+  <BlockComponent
+    type="dataprovider"
+    context="provider"
+    bind:id={providerId}
+    props={{
+      dataSource,
+      filter,
+      sortColumn,
+      sortOrder,
+      limit,
+      paginate,
+    }}
+  >
+    {#if $component.empty}
+      <Placeholder />
+    {:else}
+      <BlockComponent
+        type="repeater"
+        context="repeater"
+        containsSlot
+        props={{
+          dataProvider: `{{ literal ${safe(providerId)} }}`,
+          noRowsMessage,
+          direction,
+          hAlign,
+          vAlign,
+          gap,
+        }}
+      >
+        <slot />
+      </BlockComponent>
+    {/if}
+  </BlockComponent>
 </Block>
diff --git a/packages/client/src/components/app/blocks/TableBlock.svelte b/packages/client/src/components/app/blocks/TableBlock.svelte
index 25a8fb2b30..f75a71a3ee 100644
--- a/packages/client/src/components/app/blocks/TableBlock.svelte
+++ b/packages/client/src/components/app/blocks/TableBlock.svelte
@@ -28,8 +28,7 @@
   export let titleButtonURL
   export let titleButtonPeek
 
-  const { fetchDatasourceSchema, styleable } = getContext("sdk")
-  const component = getContext("component")
+  const { fetchDatasourceSchema } = getContext("sdk")
 
   let formId
   let dataProviderId
@@ -62,109 +61,116 @@
 
 {#if schemaLoaded}
   <Block>
-    <div class={size} use:styleable={$component.styles}>
-      <BlockComponent
-        type="form"
-        bind:id={formId}
-        props={{ dataSource, disableValidation: true, editAutoColumns: true }}
-      >
-        {#if title || enrichedSearchColumns?.length || showTitleButton}
+    <BlockComponent
+      type="form"
+      bind:id={formId}
+      props={{
+        dataSource,
+        disableValidation: true,
+        editAutoColumns: true,
+        size,
+      }}
+    >
+      {#if title || enrichedSearchColumns?.length || showTitleButton}
+        <BlockComponent
+          type="container"
+          props={{
+            direction: "row",
+            hAlign: "stretch",
+            vAlign: "middle",
+            gap: "M",
+            wrap: true,
+          }}
+          styles={{
+            normal: {
+              "margin-bottom": "20px",
+            },
+          }}
+          order={0}
+        >
+          <BlockComponent
+            type="heading"
+            props={{
+              text: title,
+            }}
+            order={0}
+          />
           <BlockComponent
             type="container"
             props={{
               direction: "row",
-              hAlign: "stretch",
-              vAlign: "middle",
+              hAlign: "left",
+              vAlign: "center",
               gap: "M",
               wrap: true,
             }}
-            styles={{
-              "margin-bottom": "20px",
-            }}
-            order={0}
+            order={1}
           >
-            <BlockComponent
-              type="heading"
-              props={{
-                text: title,
-              }}
-              order={0}
-            />
-            <BlockComponent
-              type="container"
-              props={{
-                direction: "row",
-                hAlign: "left",
-                vAlign: "center",
-                gap: "M",
-                wrap: true,
-              }}
-              order={1}
-            >
-              {#if enrichedSearchColumns?.length}
-                {#each enrichedSearchColumns as column, idx}
-                  <BlockComponent
-                    type={column.componentType}
-                    props={{
-                      field: column.name,
-                      placeholder: column.name,
-                      text: column.name,
-                      autoWidth: true,
-                    }}
-                    styles={{
-                      width: "192px",
-                    }}
-                    order={idx}
-                  />
-                {/each}
-              {/if}
-              {#if showTitleButton}
+            {#if enrichedSearchColumns?.length}
+              {#each enrichedSearchColumns as column, idx}
                 <BlockComponent
-                  type="button"
+                  type={column.componentType}
                   props={{
-                    onClick: titleButtonAction,
-                    text: titleButtonText,
-                    type: "cta",
+                    field: column.name,
+                    placeholder: column.name,
+                    text: column.name,
+                    autoWidth: true,
                   }}
-                  order={enrichedSearchColumns?.length ?? 0}
+                  styles={{
+                    normal: {
+                      width: "192px",
+                    },
+                  }}
+                  order={idx}
                 />
-              {/if}
-            </BlockComponent>
+              {/each}
+            {/if}
+            {#if showTitleButton}
+              <BlockComponent
+                type="button"
+                props={{
+                  onClick: titleButtonAction,
+                  text: titleButtonText,
+                  type: "cta",
+                }}
+                order={enrichedSearchColumns?.length ?? 0}
+              />
+            {/if}
           </BlockComponent>
-        {/if}
-        <BlockComponent
-          type="dataprovider"
-          bind:id={dataProviderId}
-          props={{
-            dataSource,
-            filter: enrichedFilter,
-            sortColumn,
-            sortOrder,
-            paginate,
-            limit: rowCount,
-          }}
-          order={1}
-        >
-          <BlockComponent
-            type="table"
-            context="table"
-            props={{
-              dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
-              columns: tableColumns,
-              showAutoColumns,
-              rowCount,
-              quiet,
-              compact,
-              allowSelectRows,
-              size,
-              linkRows,
-              linkURL,
-              linkColumn,
-              linkPeek,
-            }}
-          />
         </BlockComponent>
+      {/if}
+      <BlockComponent
+        type="dataprovider"
+        bind:id={dataProviderId}
+        props={{
+          dataSource,
+          filter: enrichedFilter,
+          sortColumn,
+          sortOrder,
+          paginate,
+          limit: rowCount,
+        }}
+        order={1}
+      >
+        <BlockComponent
+          type="table"
+          context="table"
+          props={{
+            dataProvider: `{{ literal ${safe(dataProviderId)} }}`,
+            columns: tableColumns,
+            showAutoColumns,
+            rowCount,
+            quiet,
+            compact,
+            allowSelectRows,
+            size,
+            linkRows,
+            linkURL,
+            linkColumn,
+            linkPeek,
+          }}
+        />
       </BlockComponent>
-    </div>
+    </BlockComponent>
   </Block>
 {/if}