diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte
index b5cd28c702..e3a974b344 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte
@@ -1,11 +1,13 @@
 <script>
   import { tables } from "stores/backend"
   import { ModalContent, Body, Layout, Icon, Heading } from "@budibase/bbui"
+  import blankScreenPreview from "./blankScreenPreview.png"
+  import listScreenPreview from "./listScreenPreview.png"
 
   export let onConfirm
   export let onCancel
 
-  let autoCreateModeKey = "autoCreate"
+  let listScreenModeKey = "autoCreate"
   let blankScreenModeKey = "blankScreen"
 
   let selectedScreenMode
@@ -23,61 +25,77 @@
     onConfirm={confirmScreenSelection}
     {onCancel}
     disabled={!selectedScreenMode}
-    size="L"
+    size="M"
   >
     <Layout noPadding gap="S">
       <div
-        class="screen-type item"
+        class="screen-type item blankView"
         class:selected={selectedScreenMode == blankScreenModeKey}
         on:click={() => {
           selectedScreenMode = blankScreenModeKey
         }}
       >
         <div class="content screen-type-wrap">
-          <Icon name="WebPage" />
+          <img
+            alt="blank screen preview"
+            class="preview"
+            src={blankScreenPreview}
+          />
           <div class="screen-type-text">
             <Heading size="XS">Blank screen</Heading>
-            <Body size="S">Add a blank screen</Body>
+            <Body size="S">Add an empty blank screen</Body>
           </div>
         </div>
         <div
           style="color: var(--spectrum-global-color-green-600); float: right"
         >
-          {#if selectedScreenMode == blankScreenModeKey}
-            <div class="checkmark-spacing">
-              <Icon size="S" name="CheckmarkCircle" />
-            </div>
-          {/if}
+          <div
+            class={`checkmark-spacing ${
+              selectedScreenMode == blankScreenModeKey ? "visible" : ""
+            }`}
+          >
+            <Icon size="S" name="CheckmarkCircle" />
+          </div>
         </div>
       </div>
 
+      <div class="listViewTitle">
+        <Heading size="XS">Quickly create a screen from your data</Heading>
+      </div>
+
       <div
         class="screen-type item"
-        class:selected={selectedScreenMode == autoCreateModeKey}
+        class:selected={selectedScreenMode == listScreenModeKey}
         on:click={() => {
-          selectedScreenMode = autoCreateModeKey
+          selectedScreenMode = listScreenModeKey
         }}
         class:disabled={!$tables.list.filter(table => table._id !== "ta_users")
           .length}
       >
         <div class="content screen-type-wrap">
-          <Icon name="WebPages" />
+          <img
+            alt="list screen preview"
+            class="preview"
+            src={listScreenPreview}
+          />
           <div class="screen-type-text">
-            <Heading size="XS">Autogenerated screens</Heading>
+            <Heading size="XS">List view</Heading>
             <Body size="S">
-              Add autogenerated screens with CRUD functionality to get a working
-              app quickly! (Requires a datasource)
+              Create, edit and view your data in a list view screen with side
+              panel
             </Body>
           </div>
         </div>
         <div
           style="color: var(--spectrum-global-color-green-600); float: right"
         >
-          {#if selectedScreenMode == autoCreateModeKey}
-            <div class="checkmark-spacing">
-              <Icon size="S" name="CheckmarkCircle" />
-            </div>
-          {/if}
+          <div
+            class={`checkmark-spacing ${
+              selectedScreenMode == listScreenModeKey ? "visible" : ""
+            }`}
+          >
+            <Icon size="S" name="CheckmarkCircle" />
+          </div>
         </div>
       </div>
     </Layout>
@@ -85,9 +103,6 @@
 </div>
 
 <style>
-  .screen-type.item {
-    padding: var(--spectrum-alias-item-padding-xl);
-  }
   .screen-type-wrap {
     display: flex;
     flex-direction: row;
@@ -99,6 +114,7 @@
   }
   .checkmark-spacing {
     margin-right: var(--spacing-m);
+    opacity: 0;
   }
   .content {
     letter-spacing: 0px;
@@ -106,7 +122,6 @@
   .item {
     cursor: pointer;
     grid-gap: var(--spectrum-alias-grid-margin-xsmall);
-    padding: var(--spectrum-alias-item-padding-s);
     background: var(--spectrum-alias-background-color-secondary);
     transition: 0.3s all;
     border: 1px solid var(--spectrum-global-color-gray-300);
@@ -132,4 +147,19 @@
   .screen-type-wrap :global(.spectrum-Heading) {
     padding-bottom: var(--spectrum-alias-item-padding-s);
   }
+  .preview {
+    width: 140px;
+  }
+
+  .listViewTitle {
+    margin-top: 35px;
+  }
+
+  .blankView {
+    margin-top: 10px;
+  }
+
+  .visible {
+    opacity: 1;
+  }
 </style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/blankScreenPreview.png b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/blankScreenPreview.png
new file mode 100644
index 0000000000..0511e2f4fe
Binary files /dev/null and b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/blankScreenPreview.png differ
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/listScreenPreview.png b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/listScreenPreview.png
new file mode 100644
index 0000000000..b98210d90c
Binary files /dev/null and b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/listScreenPreview.png differ
