diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index 4178932866..b54ab540da 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -174,6 +174,8 @@
         if (!$isActive("./navigation")) {
           $goto("./navigation")
         }
+      } else if (type === "request-add-component") {
+        $goto("./components/new")
       } else {
         console.warn(`Client sent unknown event type: ${type}`)
       }
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index e8fcc80db4..a54c5198cd 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -22,6 +22,7 @@
   import { Helpers } from "@budibase/bbui"
   import { getActiveConditions, reduceConditionActions } from "utils/conditions"
   import Placeholder from "components/app/Placeholder.svelte"
+  import ScreenPlaceholder from "components/app/ScreenPlaceholder.svelte"
 
   export let instance = {}
   export let isLayout = false
@@ -428,7 +429,11 @@
           <svelte:self instance={child} />
         {/each}
       {:else if emptyState}
-        <Placeholder />
+        {#if isScreen}
+          <ScreenPlaceholder />
+        {:else}
+          <Placeholder />
+        {/if}
       {:else if isBlock}
         <slot />
       {/if}
diff --git a/packages/client/src/components/app/ScreenPlaceholder.svelte b/packages/client/src/components/app/ScreenPlaceholder.svelte
new file mode 100644
index 0000000000..7635f55054
--- /dev/null
+++ b/packages/client/src/components/app/ScreenPlaceholder.svelte
@@ -0,0 +1,30 @@
+<script>
+  import { getContext } from "svelte"
+  import { Heading, Body, Button } from "@budibase/bbui"
+
+  const { builderStore } = getContext("sdk")
+</script>
+
+{#if $builderStore.inBuilder}
+  <div class="placeholder">
+    <Heading size="L">Your screen is empty</Heading>
+    <Body>Bring your app to life by adding some components!</Body>
+    <Button cta icon="Add" on:click={builderStore.actions.requestAddComponent}
+      >Add component</Button
+    >
+  </div>
+{/if}
+
+<style>
+  .placeholder {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-s);
+    flex: 1 1 auto;
+  }
+  .placeholder :global(.spectrum-Button) {
+    margin-top: var(--spacing-m);
+  }
+</style>
diff --git a/packages/client/src/stores/builder.js b/packages/client/src/stores/builder.js
index bc3e933079..0c3969c03c 100644
--- a/packages/client/src/stores/builder.js
+++ b/packages/client/src/stores/builder.js
@@ -78,6 +78,9 @@ const createBuilderStore = () => {
     clickNav: () => {
       dispatchEvent("click-nav")
     },
+    requestAddComponent: () => {
+      dispatchEvent("request-add-component")
+    },
   }
   return {
     ...store,
