diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 23ba364dfb..7361573efd 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -29,7 +29,7 @@
     $builderStore.previewType === "layout" || screenslotContext
 
   // Update component context
-  $: componentStore.set({ id, styles: { ...styles, id, allowSelection } })
+  $: componentStore.set({ id, children: children.length, styles: { ...styles, id, allowSelection } })
 
   // Gets the component constructor for the specified component
   const getComponentConstructor = component => {
diff --git a/packages/standard-components/src/List.svelte b/packages/standard-components/src/List.svelte
index 1a5638404a..809abf2972 100644
--- a/packages/standard-components/src/List.svelte
+++ b/packages/standard-components/src/List.svelte
@@ -24,9 +24,27 @@
 </script>
 
 <div use:styleable={$component.styles}>
-  {#each rows as row}
-    <DataProvider {row}>
-      <slot />
-    </DataProvider>
-  {/each}
+  {#if rows.length > 0}
+    {#each rows as row}
+      <DataProvider {row}>
+        {#if $component.children === 0}
+         <p>Add some components too.</p>
+        {:else}
+          <slot />
+        {/if}
+      </DataProvider>
+    {/each}
+  {:else}
+    <p>Feed me some data</p>
+  {/if}
 </div>
+
+<style>
+  p {
+    display: grid;
+    place-items: center;
+    background: #f5f5f5;
+    border: #ccc 1px solid;
+    padding: var(--spacing-m);
+  }
+</style>
\ No newline at end of file