diff --git a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte
index 4c67aef8fb..bed7028f6f 100644
--- a/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NavigationSelectionModal.svelte
@@ -2,11 +2,12 @@
   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"
 
   export let screenNameModal
   export let selectedScreens
   export let modal
-
+  export let screenName
   let roleId = $selectedAccessRole || "BASIC"
 
   let routeError
@@ -35,18 +36,24 @@
   }
 
   const saveScreens = async draftScreen => {
+    let route = screenName
+      ? sanitizeUrl(`/${screenName}`)
+      : draftScreen.routing.route
+    console.log(sanitizeUrl(`/${screenName}`))
     if (draftScreen) {
-      if (!draftScreen.routing.route) {
+      if (!route) {
         routeError = "URL is required"
       } else {
-        if (routeExists(draftScreen.routing.route, roleId)) {
+        if (routeExists(route, roleId)) {
           routeError = "This URL is already taken for this access role"
         } else {
           routeError = ""
         }
       }
+      console.log(routeError)
       if (routeError) return false
 
+      draftScreen.routing.route = route
       await store.actions.screens.create(draftScreen)
       if (createLink) {
         await store.actions.components.links.save(
diff --git a/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte b/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte
index e10ca7a4a1..a5fe61dbc4 100644
--- a/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/ScreenNameModal.svelte
@@ -3,7 +3,8 @@
 
   export let modal
   export let navigationSelectionModal
-  export let name
+  export let screenName
+  $: console.log(name)
 </script>
 
 <ModalContent
@@ -13,7 +14,7 @@
   onCancel={() => modal.show()}
   onConfirm={() => navigationSelectionModal.show()}
   cancelText={"Back"}
-  disabled={!name.length}
+  disabled={!screenName}
 >
-  <Input label="Name" bind:value={name} />
+  <Input label="Name" bind:value={screenName} />
 </ModalContent>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
index b787d9adec..dbed0e4cfb 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
@@ -32,9 +32,9 @@
   let modal
   let navigationSelectionModal
   let screenNameModal
-  let screenName
+  let screenName = ""
   let selectedScreens = []
-
+  $: console.log(screenName)
   // Hydrate state from URL params
   $: hydrateStateFromURL($params, $leftover)
 
@@ -220,7 +220,12 @@
   <ScreenNameModal bind:screenName {modal} {navigationSelectionModal} />
 </Modal>
 <Modal bind:this={navigationSelectionModal}>
-  <NavigationSelectionModal {modal} {selectedScreens} {screenNameModal} />
+  <NavigationSelectionModal
+    {screenName}
+    {modal}
+    {selectedScreens}
+    {screenNameModal}
+  />
 </Modal>
 
 <style>