diff --git a/packages/builder/src/components/common/CreationPage.svelte b/packages/builder/src/components/common/CreationPage.svelte
new file mode 100644
index 0000000000..9631e9d961
--- /dev/null
+++ b/packages/builder/src/components/common/CreationPage.svelte
@@ -0,0 +1,39 @@
+<script>
+  import { Icon, Heading } from "@budibase/bbui"
+
+  export let showClose = false
+  export let onClose = () => {}
+  export let heading = ""
+</script>
+
+<section class="page">
+  <div class="closeButton">
+    {#if showClose}
+      <Icon hoverable name="Close" on:click={onClose} />
+    {/if}
+  </div>
+  <div class="heading">
+    <Heading weight="light">{heading}</Heading>
+  </div>
+  <slot />
+</section>
+
+<style>
+  .page {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .heading {
+    text-align: center;
+  }
+
+  .closeButton {
+    height: 38px;
+    display: flex;
+    justify-content: right;
+    width: 100%;
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDetailsModal.svelte b/packages/builder/src/components/design/ScreenDetailsModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDetailsModal.svelte
rename to packages/builder/src/components/design/ScreenDetailsModal.svelte
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index f29b7067c3..9e831f5bd9 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@@ -15,8 +15,6 @@
   import { createValidationStore } from "helpers/validation/yup"
   import * as appValidation from "helpers/validation/yup/app"
   import TemplateCard from "components/common/TemplateCard.svelte"
-  import createFromScratchScreen from "builderStore/store/screenTemplates/createFromScratchScreen"
-  import { Roles } from "constants/backend"
   import { lowercase } from "helpers"
 
   export let template
@@ -142,21 +140,6 @@
       // Create user
       await auth.setInitInfo({})
 
-      // Create a default home screen if no template was selected
-      if (template == null) {
-        let defaultScreenTemplate = createFromScratchScreen.create()
-        defaultScreenTemplate.routing.route = "/home"
-        defaultScreenTemplate.routing.roldId = Roles.BASIC
-        try {
-          await store.actions.screens.save(defaultScreenTemplate)
-        } catch (err) {
-          console.error("Could not create a default application screen", err)
-          notifications.warning(
-            "Encountered an issue creating the default screen."
-          )
-        }
-      }
-
       $goto(`/builder/app/${createdApp.instance._id}`)
     } catch (error) {
       creating = false
diff --git a/packages/builder/src/pages/builder/app/[application]/data/new.svelte b/packages/builder/src/pages/builder/app/[application]/data/new.svelte
index 4eb9ce16e1..c5090229b3 100644
--- a/packages/builder/src/pages/builder/app/[application]/data/new.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/data/new.svelte
@@ -7,12 +7,13 @@
   } from "stores/backend"
 
   import { hasData } from "stores/selectors"
-  import { Icon, notifications, Heading, Body } from "@budibase/bbui"
+  import { notifications, Body } from "@budibase/bbui"
   import { params, goto } from "@roxi/routify"
   import CreateExternalDatasourceModal from "./_components/CreateExternalDatasourceModal/index.svelte"
   import CreateInternalTableModal from "./_components/CreateInternalTableModal.svelte"
   import DatasourceOption from "./_components/DatasourceOption.svelte"
   import IntegrationIcon from "components/backend/DatasourceNavigator/IntegrationIcon.svelte"
+  import CreationPage from "components/common/CreationPage.svelte"
   import ICONS from "components/backend/DatasourceNavigator/icons/index.js"
   import FontAwesomeIcon from "components/common/FontAwesomeIcon.svelte"
 
@@ -46,16 +47,11 @@
   bind:this={externalDatasourceModal}
 />
 
-<div class="page">
-  <div class="closeButton">
-    {#if hasData($datasources, $tables)}
-      <Icon hoverable name="Close" on:click={$goto("./table")} />
-    {/if}
-  </div>
-  <div class="heading">
-    <Heading weight="light">Add new data source</Heading>
-  </div>
-
+<CreationPage
+  showClose={hasData($datasources, $tables)}
+  onClose={() => $goto("./table")}
+  heading="Add new data source"
+>
   <div class="subHeading">
     <Body>Get started with our Budibase DB</Body>
     <div
@@ -113,30 +109,13 @@
       </DatasourceOption>
     {/each}
   </div>
-</div>
+</CreationPage>
 
 <style>
-  .page {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-  }
-
-  .closeButton {
-    height: 38px;
-    display: flex;
-    justify-content: right;
-    width: 100%;
-  }
-
-  .heading {
-    margin-bottom: 12px;
-  }
-
   .subHeading {
     display: flex;
     align-items: center;
+    margin-top: 12px;
     margin-bottom: 24px;
   }
 
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
deleted file mode 100644
index e3a974b344..0000000000
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte
+++ /dev/null
@@ -1,165 +0,0 @@
-<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 listScreenModeKey = "autoCreate"
-  let blankScreenModeKey = "blankScreen"
-
-  let selectedScreenMode
-
-  const confirmScreenSelection = async () => {
-    await onConfirm(selectedScreenMode)
-  }
-</script>
-
-<div>
-  <ModalContent
-    title="Add screens"
-    confirmText="Continue"
-    cancelText="Cancel"
-    onConfirm={confirmScreenSelection}
-    {onCancel}
-    disabled={!selectedScreenMode}
-    size="M"
-  >
-    <Layout noPadding gap="S">
-      <div
-        class="screen-type item blankView"
-        class:selected={selectedScreenMode == blankScreenModeKey}
-        on:click={() => {
-          selectedScreenMode = blankScreenModeKey
-        }}
-      >
-        <div class="content screen-type-wrap">
-          <img
-            alt="blank screen preview"
-            class="preview"
-            src={blankScreenPreview}
-          />
-          <div class="screen-type-text">
-            <Heading size="XS">Blank screen</Heading>
-            <Body size="S">Add an empty blank screen</Body>
-          </div>
-        </div>
-        <div
-          style="color: var(--spectrum-global-color-green-600); float: right"
-        >
-          <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 == listScreenModeKey}
-        on:click={() => {
-          selectedScreenMode = listScreenModeKey
-        }}
-        class:disabled={!$tables.list.filter(table => table._id !== "ta_users")
-          .length}
-      >
-        <div class="content screen-type-wrap">
-          <img
-            alt="list screen preview"
-            class="preview"
-            src={listScreenPreview}
-          />
-          <div class="screen-type-text">
-            <Heading size="XS">List view</Heading>
-            <Body size="S">
-              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"
-        >
-          <div
-            class={`checkmark-spacing ${
-              selectedScreenMode == listScreenModeKey ? "visible" : ""
-            }`}
-          >
-            <Icon size="S" name="CheckmarkCircle" />
-          </div>
-        </div>
-      </div>
-    </Layout>
-  </ModalContent>
-</div>
-
-<style>
-  .screen-type-wrap {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  .disabled {
-    opacity: 0.3;
-    pointer-events: none;
-  }
-  .checkmark-spacing {
-    margin-right: var(--spacing-m);
-    opacity: 0;
-  }
-  .content {
-    letter-spacing: 0px;
-  }
-  .item {
-    cursor: pointer;
-    grid-gap: var(--spectrum-alias-grid-margin-xsmall);
-    background: var(--spectrum-alias-background-color-secondary);
-    transition: 0.3s all;
-    border: 1px solid var(--spectrum-global-color-gray-300);
-    border-radius: 4px;
-    border-width: 1px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  .item:hover,
-  .selected {
-    background: var(--spectrum-alias-background-color-tertiary);
-  }
-  .screen-type-wrap .screen-type-text {
-    padding-left: var(--spectrum-alias-item-padding-xl);
-  }
-  .screen-type-wrap .screen-type-text :global(h1) {
-    padding-bottom: var(--spacing-xs);
-  }
-  .screen-type-wrap :global(.spectrum-Icon) {
-    min-width: var(--spectrum-icon-size-m);
-  }
-  .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/ScreenDropdownMenu.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte
index ec965ed659..fd5ddd9459 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDropdownMenu.svelte
@@ -9,7 +9,7 @@
     Helpers,
     notifications,
   } from "@budibase/bbui"
-  import ScreenDetailsModal from "./ScreenDetailsModal.svelte"
+  import ScreenDetailsModal from "components/design/ScreenDetailsModal.svelte"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
   import { makeComponentUnique } from "builderStore/componentUtils"
 
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
index 92a88abb13..6362af3073 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
@@ -1,17 +1,16 @@
 <script>
   import { Search, Layout, Select, Body, Button } from "@budibase/bbui"
   import Panel from "components/design/Panel.svelte"
+  import { goto } from "@roxi/routify"
   import { roles } from "stores/backend"
   import { store, sortedScreens, userSelectedResourceMap } from "builderStore"
   import NavItem from "components/common/NavItem.svelte"
   import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
-  import ScreenWizard from "./ScreenWizard.svelte"
   import RoleIndicator from "./RoleIndicator.svelte"
   import { RoleUtils } from "@budibase/frontend-core"
 
   let searchString
   let accessRole = "all"
-  let showNewScreenModal
 
   $: filteredScreens = getFilteredScreens(
     $sortedScreens,
@@ -31,7 +30,7 @@
 
 <Panel title="Screens" borderRight>
   <Layout paddingX="L" paddingY="XL" gap="S">
-    <Button on:click={showNewScreenModal} cta>Add screen</Button>
+    <Button on:click={() => $goto("../../new")} cta>Add screen</Button>
     <Search
       placeholder="Search"
       value={searchString}
@@ -74,5 +73,3 @@
     </Layout>
   {/if}
 </Panel>
-
-<ScreenWizard bind:showModal={showNewScreenModal} />
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
deleted file mode 100644
index 0511e2f4fe..0000000000
Binary files a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/blankScreenPreview.png and /dev/null 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
deleted file mode 100644
index b98210d90c..0000000000
Binary files a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/listScreenPreview.png and /dev/null differ
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenWizard.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/CreateScreenModal.svelte
similarity index 88%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenWizard.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/_components/CreateScreenModal.svelte
index acca6e0fa3..3ca3e6b419 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenWizard.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/CreateScreenModal.svelte
@@ -1,6 +1,5 @@
 <script>
-  import ScreenDetailsModal from "./ScreenDetailsModal.svelte"
-  import NewScreenModal from "./NewScreenModal.svelte"
+  import ScreenDetailsModal from "components/design/ScreenDetailsModal.svelte"
   import DatasourceModal from "./DatasourceModal.svelte"
   import ScreenRoleModal from "./ScreenRoleModal.svelte"
   import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
@@ -11,11 +10,11 @@
   import { tables } from "stores/backend"
   import { Roles } from "constants/backend"
   import { capitalise } from "helpers"
+  import { goto } from "@roxi/routify"
 
   let pendingScreen
 
   // Modal refs
-  let newScreenModal
   let screenDetailsModal
   let datasourceModal
   let screenAccessRoleModal
@@ -26,16 +25,6 @@
   let blankScreenUrl = null
   let screenMode = null
 
-  // External handler to show the screen wizard
-  export const showModal = () => {
-    selectedTemplates = null
-    blankScreenUrl = null
-    screenMode = null
-    pendingScreen = null
-    screenAccessRole = Roles.BASIC
-    newScreenModal.show()
-  }
-
   // Creates an array of screens, checking and sanitising their URLs
   const createScreens = async ({ screens, screenAccessRole }) => {
     if (!screens?.length) {
@@ -43,6 +32,8 @@
     }
 
     try {
+      let screenId
+
       for (let screen of screens) {
         // Check we aren't clashing with an existing URL
         if (hasExistingUrl(screen.routing.route)) {
@@ -64,7 +55,8 @@
         screen.routing.roleId = screenAccessRole
 
         // Create the screen
-        await store.actions.screens.save(screen)
+        const response = await store.actions.screens.save(screen)
+        screenId = response._id
 
         // Add link in layout for list screens
         if (screen.props._instanceName.endsWith("List")) {
@@ -74,7 +66,10 @@
           )
         }
       }
+
+      $goto(`./${screenId}`)
     } catch (error) {
+      console.log(error)
       notifications.error("Error creating screens")
     }
   }
@@ -104,18 +99,24 @@
   }
 
   // Handler for NewScreenModal
-  const confirmScreenSelection = async mode => {
+  export const show = mode => {
+    selectedTemplates = null
+    blankScreenUrl = null
     screenMode = mode
+    pendingScreen = null
+    screenAccessRole = Roles.BASIC
 
-    if (mode === "autoCreate") {
+    if (mode === "table") {
       datasourceModal.show()
-    } else {
+    } else if (mode === "blank") {
       let templates = getTemplates($store, $tables.list)
       const blankScreenTemplate = templates.find(
         t => t.id === "createFromScratch"
       )
       pendingScreen = blankScreenTemplate.create()
       screenDetailsModal.show()
+    } else {
+      throw new Error("Invalid mode provided")
     }
   }
 
@@ -155,7 +156,7 @@
 
   // Submit screen config for creation.
   const confirmScreenCreation = async () => {
-    if (screenMode === "blankScreen") {
+    if (screenMode === "blank") {
       confirmBlankScreenCreation({
         screenUrl: blankScreenUrl,
         screenAccessRole,
@@ -166,7 +167,7 @@
   }
 
   const roleSelectBack = () => {
-    if (screenMode === "blankScreen") {
+    if (screenMode === "blank") {
       screenDetailsModal.show()
     } else {
       datasourceModal.show()
@@ -174,14 +175,9 @@
   }
 </script>
 
-<Modal bind:this={newScreenModal}>
-  <NewScreenModal onConfirm={confirmScreenSelection} />
-</Modal>
-
 <Modal bind:this={datasourceModal}>
   <DatasourceModal
     onConfirm={confirmScreenDatasources}
-    onCancel={() => newScreenModal.show()}
     initalScreens={!selectedTemplates ? [] : [...selectedTemplates]}
   />
 </Modal>
@@ -198,7 +194,6 @@
 <Modal bind:this={screenDetailsModal}>
   <ScreenDetailsModal
     onConfirm={confirmScreenBlank}
-    onCancel={() => newScreenModal.show()}
     initialUrl={blankScreenUrl}
   />
 </Modal>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/DatasourceModal.svelte
similarity index 100%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/_components/DatasourceModal.svelte
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenRoleModal.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/ScreenRoleModal.svelte
similarity index 93%
rename from packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenRoleModal.svelte
rename to packages/builder/src/pages/builder/app/[application]/design/_components/ScreenRoleModal.svelte
index cde8047b97..5d73b7961c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenRoleModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/_components/ScreenRoleModal.svelte
@@ -40,14 +40,14 @@
 </script>
 
 <ModalContent
-  title="Autogenerated screens"
+  title="Access"
   confirmText="Done"
   cancelText="Back"
   {onConfirm}
   {onCancel}
   disabled={!!error}
 >
-  Select which level of access you want your screens to have
+  Select the level of access required to see these screens
   <Select
     bind:value={screenAccessRole}
     on:change={onChangeRole}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/blank.png b/packages/builder/src/pages/builder/app/[application]/design/blank.png
new file mode 100644
index 0000000000..4867cc8dc3
Binary files /dev/null and b/packages/builder/src/pages/builder/app/[application]/design/blank.png differ
diff --git a/packages/builder/src/pages/builder/app/[application]/design/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/index.svelte
index 6490000b35..e9c72a6e1f 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/index.svelte
@@ -1,67 +1,12 @@
 <script>
-  import { store, selectedScreen } from "builderStore"
-  import { onMount } from "svelte"
   import { redirect } from "@roxi/routify"
-  import { Layout, Button, Detail, notifications } from "@budibase/bbui"
-  import Logo from "assets/bb-space-man.svg"
-  import createFromScratchScreen from "builderStore/store/screenTemplates/createFromScratchScreen"
-  import { Roles } from "constants/backend"
+  import { store as frontendStore } from "builderStore"
 
-  let loaded = false
-
-  const createFirstScreen = async () => {
-    let screen = createFromScratchScreen.create()
-    screen.routing.route = "/home"
-    screen.routing.roldId = Roles.BASIC
-    screen.routing.homeScreen = true
-    try {
-      const savedScreen = await store.actions.screens.save(screen)
-      notifications.success("Screen created successfully")
-      $redirect(`./${savedScreen._id}`)
-    } catch (err) {
-      console.error("Could not create screen", err)
-      notifications.error("Error creating screen")
-    }
-  }
-
-  onMount(() => {
-    if ($selectedScreen) {
-      $redirect(`./${$selectedScreen._id}`)
-    } else if ($store.screens?.length) {
-      $redirect(`./${$store.screens[0]._id}`)
+  $: {
+    if ($frontendStore.screens.length > 0) {
+      $redirect(`./${$frontendStore.screens[0]._id}`)
     } else {
-      loaded = true
+      $redirect("./new")
     }
-  })
+  }
 </script>
-
-{#if loaded}
-  <div class="centered">
-    <Layout gap="S" justifyItems="center">
-      <img class="img-size" alt="logo" src={Logo} />
-      <div class="new-screen-text">
-        <Detail size="L">LET’S BRING THIS APP TO LIFE</Detail>
-      </div>
-      <Button on:click={createFirstScreen} size="M" cta icon="Add">
-        Create first screen
-      </Button>
-    </Layout>
-  </div>
-{/if}
-
-<style>
-  .centered {
-    width: 100%;
-    height: 100%;
-    display: grid;
-    place-items: center;
-  }
-  .new-screen-text {
-    width: 150px;
-    text-align: center;
-    font-weight: 600;
-  }
-  .img-size {
-    width: 170px;
-  }
-</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/new.svelte b/packages/builder/src/pages/builder/app/[application]/design/new.svelte
new file mode 100644
index 0000000000..13eaaeaf7e
--- /dev/null
+++ b/packages/builder/src/pages/builder/app/[application]/design/new.svelte
@@ -0,0 +1,104 @@
+<script>
+  import { Body } from "@budibase/bbui"
+  import CreationPage from "components/common/CreationPage.svelte"
+  import blankImage from "./blank.png"
+  import tableImage from "./table.png"
+  import CreateScreenModal from "./_components/CreateScreenModal.svelte"
+  import { store } from "builderStore"
+  import { goto } from "@roxi/routify"
+
+  let createScreenModal
+
+  $: hasScreens = $store.screens?.length
+</script>
+
+<div class="page">
+  <CreationPage
+    showClose={$store.screens.length > 0}
+    onClose={() => $goto(`./${$store.screens[0]._id}`)}
+    heading={hasScreens ? "Create new screen" : "Create your first screen"}
+  >
+    <div class="subHeading">
+      <Body size="L">Start from scratch or create screens from your data</Body>
+    </div>
+
+    <div class="cards">
+      <div class="card" on:click={() => createScreenModal.show("blank")}>
+        <div class="image">
+          <img alt="" src={blankImage} />
+        </div>
+        <div class="text">
+          <Body size="S">Blank screen</Body>
+          <Body size="XS">Add an empty blank screen</Body>
+        </div>
+      </div>
+
+      <div class="card" on:click={() => createScreenModal.show("table")}>
+        <div class="image">
+          <img alt="" src={tableImage} />
+        </div>
+        <div class="text">
+          <Body size="S">Table</Body>
+          <Body size="XS">View, edit and delete rows on a table</Body>
+        </div>
+      </div>
+    </div>
+  </CreationPage>
+</div>
+
+<CreateScreenModal bind:this={createScreenModal} />
+
+<style>
+  .page {
+    padding: 28px 40px 40px 40px;
+  }
+
+  .subHeading :global(p) {
+    text-align: center;
+    margin-top: 12px;
+    margin-bottom: 24px;
+    color: var(--grey-6);
+  }
+
+  .cards {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .card {
+    margin: 12px;
+    max-width: 235px;
+    transition: filter 150ms;
+  }
+
+  .card:hover {
+    filter: brightness(1.1);
+    cursor: pointer;
+  }
+
+  .image {
+    border-radius: 4px 4px 0 0;
+    width: 100%;
+    max-height: 127px;
+    overflow: hidden;
+  }
+
+  .image img {
+    width: 100%;
+  }
+
+  .text {
+    border: 1px solid var(--grey-4);
+    border-radius: 0 0 4px 4px;
+    padding: 8px 16px 13px 16px;
+  }
+
+  .text :global(p:nth-child(1)) {
+    margin-bottom: 6px;
+  }
+
+  .text :global(p:nth-child(2)) {
+    color: var(--grey-6);
+  }
+</style>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/table.png b/packages/builder/src/pages/builder/app/[application]/design/table.png
new file mode 100644
index 0000000000..0bfda10bbe
Binary files /dev/null and b/packages/builder/src/pages/builder/app/[application]/design/table.png differ
diff --git a/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte b/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte
index e67d3422c0..efc9236699 100644
--- a/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte
@@ -7,8 +7,6 @@
   import { API } from "api"
   import { store, automationStore } from "builderStore"
   import { auth, admin } from "stores/portal"
-  import createFromScratchScreen from "builderStore/store/screenTemplates/createFromScratchScreen"
-  import { Roles } from "constants/backend"
 
   let name = "My first app"
   let url = "my-first-app"
@@ -38,11 +36,6 @@
     // Create user
     await auth.setInitInfo({})
 
-    let defaultScreenTemplate = createFromScratchScreen.create()
-    defaultScreenTemplate.routing.route = "/home"
-    defaultScreenTemplate.routing.roldId = Roles.BASIC
-    await store.actions.screens.save(defaultScreenTemplate)
-
     appId = createdApp.instance._id
     return createdApp
   }