diff --git a/packages/builder/src/components/design/NewScreen/CreateScreenModal.svelte b/packages/builder/src/components/design/NewScreen/CreateScreenModal.svelte
index 3ca3e6b419..300906eaf6 100644
--- a/packages/builder/src/components/design/NewScreen/CreateScreenModal.svelte
+++ b/packages/builder/src/components/design/NewScreen/CreateScreenModal.svelte
@@ -67,7 +67,8 @@
         }
       }
 
-      $goto(`./${screenId}`)
+      // Select and go to new screen
+      store.actions.screens.select(screenId)
     } catch (error) {
       console.log(error)
       notifications.error("Error creating screens")
diff --git a/packages/builder/src/helpers/urlStateSync.js b/packages/builder/src/helpers/urlStateSync.js
index 04c639b3ec..2408dde2f1 100644
--- a/packages/builder/src/helpers/urlStateSync.js
+++ b/packages/builder/src/helpers/urlStateSync.js
@@ -56,6 +56,11 @@ export const syncURLToState = options => {
 
   // Navigate to a certain URL
   const gotoUrl = (url, params) => {
+    // Clean URL
+    if (url?.endsWith("/index")) {
+      url = url.replace("/index", "")
+    }
+    // Allow custom URL handling
     if (beforeNavigate) {
       const res = beforeNavigate(url, params)
       if (res?.url) {
@@ -65,10 +70,6 @@ export const syncURLToState = options => {
         params = res.params
       }
     }
-    // Clean URL
-    if (url?.endsWith("/index")) {
-      url = url.replace("/index", "")
-    }
     log("Navigating to", url, "with params", params)
     cachedGoto(url, params)
   }
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
index 32150ef921..977d0ff0a9 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
@@ -1,12 +1,12 @@
 <script>
   import ScreenList from "./ScreenList/index.svelte"
   import ComponentList from "./ComponentList/index.svelte"
-  import { isActive } from "@roxi/routify"
+  import { selectedScreen } from "builderStore"
 </script>
 
 <div class="panel">
   <ScreenList />
-  {#if $isActive("./:componentId")}
+  {#if $selectedScreen}
     <ComponentList />
   {/if}
 </div>
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
index 0ecc9b76bf..b4a97fbf09 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ScreenList/index.svelte
@@ -11,6 +11,7 @@
   import DropdownMenu from "./DropdownMenu.svelte"
   import NewScreen from "components/design/NewScreen/index.svelte"
   import { onMount, tick } from "svelte"
+  import { beforeUrlChange } from "@roxi/routify"
 
   let newScreen = false
   let search = false
@@ -25,6 +26,14 @@
 
   $: filteredScreens = getFilteredScreens($sortedScreens, searchValue)
 
+  // Close new screen when URL changes
+  $beforeUrlChange(() => {
+    if (newScreen) {
+      newScreen = false
+    }
+    return true
+  })
+
   const sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
 
   const openSearch = async () => {
@@ -176,7 +185,12 @@
 </div>
 
 <div class="newScreen" class:newScreenVisible={newScreen}>
-  <NewScreen onClose={() => (newScreen = false)} />
+  <NewScreen
+    onClose={() => {
+      console.log("close")
+      newScreen = false
+    }}
+  />
 </div>
 
 <style>