diff --git a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte
index 8035281193..52a8e91451 100644
--- a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte
@@ -1,98 +1,12 @@
 <script>
   import { ModalContent, Body, Detail } from "@budibase/bbui"
-  import { store, selectedAccessRole, allScreens } from "builderStore"
-  import { cloneDeep } from "lodash/fp"
-  import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
-  import { onDestroy } from "svelte"
 
   export let selectedScreens
-  export let screenName
-  export let url
   export let chooseModal
-
-  let roleId = $selectedAccessRole || "BASIC"
-
-  let routeError
+  export let save
   let selectedNav
   let createdScreens = []
-  $: {
-    selectedScreens?.forEach(screen => {
-      createdScreens = [...createdScreens, screen.create()]
-    })
-  }
-
   $: blankSelected = selectedScreens.length === 1
-
-  const save = async screens => {
-    for (let screen of screens) {
-      await saveScreens(screen)
-    }
-
-    let navLayout = cloneDeep(
-      $store.layouts.find(layout => layout._id === "layout_private_master")
-    )
-    navLayout.props.navigation = selectedNav
-
-    await store.actions.routing.fetch()
-    await store.actions.layouts.save(navLayout)
-    selectedScreens = []
-    screenName = ""
-    url = ""
-  }
-  const saveScreens = async draftScreen => {
-    let existingScreenCount = $store.screens.filter(
-      s => s.props._instanceName == draftScreen.props._instanceName
-    ).length
-
-    if (existingScreenCount > 0) {
-      let oldUrlArr = draftScreen.routing.route.split("/")
-      oldUrlArr[1] = `${oldUrlArr[1]}-${existingScreenCount + 1}`
-      draftScreen.routing.route = oldUrlArr.join("/")
-    }
-
-    let route = url ? sanitizeUrl(`${url}`) : draftScreen.routing.route
-    if (draftScreen) {
-      if (!route) {
-        routeError = "URL is required"
-      } else {
-        if (routeExists(route, roleId)) {
-          routeError = "This URL is already taken for this access role"
-        } else {
-          routeError = ""
-        }
-      }
-
-      if (routeError) return false
-
-      if (screenName) {
-        draftScreen.props._instanceName = screenName
-      }
-
-      draftScreen.routing.route = route
-
-      await store.actions.screens.create(draftScreen)
-      if (draftScreen.props._instanceName.endsWith("List")) {
-        await store.actions.components.links.save(
-          draftScreen.routing.route,
-          draftScreen.routing.route.split("/")[1]
-        )
-      }
-    }
-  }
-
-  const routeExists = (route, roleId) => {
-    return $allScreens.some(
-      screen =>
-        screen.routing.route.toLowerCase() === route.toLowerCase() &&
-        screen.routing.roleId === roleId
-    )
-  }
-
-  onDestroy(() => {
-    selectedScreens = []
-    screenName = ""
-    url = ""
-  })
 </script>
 
 <ModalContent
diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
index cfbcd444c2..e9cedd66fb 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@@ -6,23 +6,24 @@
 
   export let selectedScreens = []
   export let chooseModal
+  export let save
 
   const blankScreen = "createFromScratch"
 
   $: blankSelected = selectedScreens?.length === 1
   $: autoSelected = selectedScreens?.length > 0 && !blankSelected
+  let templates = getTemplates($store, $tables.list)
 
-  $: templates = getTemplates($store, $tables.list)
   const toggleScreenSelection = table => {
     if (selectedScreens.find(s => s.name.includes(table.name))) {
       selectedScreens = selectedScreens.filter(
         screen => !screen.name.includes(table.name)
       )
     } else {
-      templates = templates.filter(template =>
-        template.name.includes(table.name)
+      let partialTemplates = getTemplates($store, $tables.list).filter(
+        template => template.name.includes(table.name)
       )
-      selectedScreens = [...templates, ...selectedScreens]
+      selectedScreens = [...partialTemplates, ...selectedScreens]
     }
   }
 </script>
@@ -31,7 +32,7 @@
   title="Add screens"
   confirmText="Add Screens"
   cancelText="Cancel"
-  onConfirm={() => (autoSelected ? chooseModal(2) : chooseModal(1))}
+  onConfirm={() => (autoSelected ? save() : chooseModal(1))}
   disabled={!selectedScreens.length}
   size="L"
 >
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
index f353da1a4b..f67f363ce8 100644
--- a/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ScreenDetailsModal.svelte
@@ -6,7 +6,7 @@
   export let screenName
   export let url
   export let chooseModal
-
+  export let save
   let routeError
   let roleId = $selectedAccessRole || "BASIC"
 
@@ -37,7 +37,7 @@
   title={"Enter details"}
   confirmText={"Continue"}
   onCancel={() => chooseModal(0)}
-  onConfirm={() => chooseModal(2)}
+  onConfirm={() => save()}
   cancelText={"Back"}
   disabled={!screenName || !url || routeError}
 >
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
index 33d3cbb4aa..f3a2d5ca50 100644
--- a/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ScreenWizard.svelte
@@ -2,7 +2,10 @@
   import NavigationSelectionModal from "components/design/NavigationPanel/NavigationSelectionModal.svelte"
   import ScreenDetailsModal from "components/design/NavigationPanel/ScreenDetailsModal.svelte"
   import NewScreenModal from "components/design/NavigationPanel/NewScreenModal.svelte"
+  import sanitizeUrl from "builderStore/store/screenTemplates/utils/sanitizeUrl"
   import { Modal } from "@budibase/bbui"
+  import { store, selectedAccessRole, allScreens } from "builderStore"
+  import { onDestroy } from "svelte"
 
   let newScreenModal
   let navigationSelectionModal
@@ -11,6 +14,81 @@
   let url = ""
   let selectedScreens = []
 
+  let roleId = $selectedAccessRole || "BASIC"
+
+  let routeError
+  let createdScreens = []
+  $: {
+    selectedScreens?.forEach(screen => {
+      createdScreens = [...createdScreens, screen.create()]
+    })
+  }
+
+  const save = async () => {
+    for (let screen of createdScreens) {
+      await saveScreens(screen)
+    }
+
+    await store.actions.routing.fetch()
+    selectedScreens = []
+    screenName = ""
+    url = ""
+  }
+  const saveScreens = async draftScreen => {
+    let existingScreenCount = $store.screens.filter(
+      s => s.props._instanceName == draftScreen.props._instanceName
+    ).length
+
+    if (existingScreenCount > 0) {
+      let oldUrlArr = draftScreen.routing.route.split("/")
+      oldUrlArr[1] = `${oldUrlArr[1]}-${existingScreenCount + 1}`
+      draftScreen.routing.route = oldUrlArr.join("/")
+    }
+
+    let route = url ? sanitizeUrl(`${url}`) : draftScreen.routing.route
+    if (draftScreen) {
+      if (!route) {
+        routeError = "URL is required"
+      } else {
+        if (routeExists(route, roleId)) {
+          routeError = "This URL is already taken for this access role"
+        } else {
+          routeError = ""
+        }
+      }
+
+      if (routeError) return false
+
+      if (screenName) {
+        draftScreen.props._instanceName = screenName
+      }
+
+      draftScreen.routing.route = route
+
+      await store.actions.screens.create(draftScreen)
+      if (draftScreen.props._instanceName.endsWith("List")) {
+        await store.actions.components.links.save(
+          draftScreen.routing.route,
+          draftScreen.routing.route.split("/")[1]
+        )
+      }
+    }
+  }
+
+  const routeExists = (route, roleId) => {
+    return $allScreens.some(
+      screen =>
+        screen.routing.route.toLowerCase() === route.toLowerCase() &&
+        screen.routing.roleId === roleId
+    )
+  }
+
+  onDestroy(() => {
+    selectedScreens = []
+    screenName = ""
+    url = ""
+  })
+
   export const showModal = () => {
     newScreenModal.show()
   }
@@ -32,17 +110,12 @@
 </script>
 
 <Modal bind:this={newScreenModal}>
-  <NewScreenModal bind:selectedScreens {chooseModal} />
+  <NewScreenModal bind:selectedScreens {save} {chooseModal} />
 </Modal>
 
 <Modal bind:this={screenDetailsModal}>
-  <ScreenDetailsModal bind:screenName bind:url {chooseModal} />
+  <ScreenDetailsModal bind:screenName bind:url {save} {chooseModal} />
 </Modal>
 <Modal bind:this={navigationSelectionModal}>
-  <NavigationSelectionModal
-    bind:url
-    bind:screenName
-    bind:selectedScreens
-    {chooseModal}
-  />
+  <NavigationSelectionModal {chooseModal} {save} />
 </Modal>