diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index 77b0e6b665..fb3e28ded5 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -65,10 +65,7 @@
               _id: "90a52cd0-f215-46c1-b29b-e28f9e7edf72",
               _component: "@budibase/standard-components/heading",
               _styles: {
-                normal: {
-                  width: "500px",
-                  padding: "8px",
-                },
+                normal: {},
                 hover: {},
                 active: {},
                 selected: {},
@@ -86,10 +83,7 @@
               _component: "@budibase/standard-components/text",
               _styles: {
                 normal: {
-                  "max-width": "",
                   "text-align": "left",
-                  width: "500px",
-                  padding: "8px",
                 },
                 hover: {},
                 active: {},
@@ -107,10 +101,7 @@
               _component: "@budibase/standard-components/text",
               _styles: {
                 normal: {
-                  "max-width": "",
                   "text-align": "left",
-                  width: "500px",
-                  padding: "8px",
                 },
                 hover: {},
                 active: {},
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
index 7bfa9ddab9..47ee1319c8 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@@ -11,7 +11,7 @@ export default `<html>
       *, *:before, *:after {
         box-sizing: border-box;
       }
-      .container-screenslot-placeholder {
+      [data-bb-id="container-screenslot-placeholder"] {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -23,7 +23,7 @@ export default `<html>
         background-color: rgba(0, 0, 0, 0.05);
         flex: 1 1 auto;
       }
-      .container-screenslot-placeholder span {
+      [data-bb-id="container-screenslot-placeholder"] span {
         display: block;
         margin-bottom: 10px;
       }
diff --git a/packages/standard-components/src/Text.svelte b/packages/standard-components/src/Text.svelte
index d1b5c4a567..3da98b13a0 100644
--- a/packages/standard-components/src/Text.svelte
+++ b/packages/standard-components/src/Text.svelte
@@ -1,35 +1,37 @@
 <script>
+  import { styleable } from "@budibase/component-sdk"
+
   export let text = ""
   export let className = ""
   export let type = ""
-  export let _bb
+  export let styles
 
   const isTag = tag => type === tag
 </script>
 
 {#if isTag('none')}
-  <span>{text}</span>
+  <span use:styleable={styles}>{text}</span>
 {:else if isTag('bold')}
-  <b class={className}>{text}</b>
+  <b class={className} use:styleable={styles}>{text}</b>
 {:else if isTag('strong')}
-  <strong class={className}>{text}</strong>
+  <strong class={className} use:styleable={styles}>{text}</strong>
 {:else if isTag('italic')}
-  <i class={className}>{text}</i>
+  <i class={className} use:styleable={styles}>{text}</i>
 {:else if isTag('emphasis')}
-  <em class={className}>{text}</em>
+  <em class={className} use:styleable={styles}>{text}</em>
 {:else if isTag('mark')}
-  <mark class={className}>{text}</mark>
+  <mark class={className} use:styleable={styles}>{text}</mark>
 {:else if isTag('small')}
-  <small class={className}>{text}</small>
+  <small class={className} use:styleable={styles}>{text}</small>
 {:else if isTag('del')}
-  <del class={className}>{text}</del>
+  <del class={className} use:styleable={styles}>{text}</del>
 {:else if isTag('ins')}
-  <ins class={className}>{text}</ins>
+  <ins class={className} use:styleable={styles}>{text}</ins>
 {:else if isTag('sub')}
-  <sub class={className}>{text}</sub>
+  <sub class={className} use:styleable={styles}>{text}</sub>
 {:else if isTag('sup')}
-  <sup class={className}>{text}</sup>
-{:else}<span>{text}</span>{/if}
+  <sup class={className} use:styleable={styles}>{text}</sup>
+{:else}<span use:styleable={styles}>{text}</span>{/if}
 
 <style>
   span {
