diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
index fd62eeee58..9283c7ec7a 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/PathTree.svelte
@@ -11,10 +11,9 @@
   const dragDropStore = instantiateStore()
 
   export let route
+  export let path
   export let indent
 
-  $: console.log(route)
-  $: console.log("preview", $store.currentPreviewItem)
   $: selectedScreen = $store.currentPreviewItem
 
   const changeScreen = screenId => {
@@ -26,28 +25,28 @@
 
 <NavItem
   icon="ri-route-line"
-  text={route.fullpath}
+  text={path}
+  opened={true}
   withArrow={route.subpaths}
   on:click={() => console.log(route)} />
 
-{#each Object.keys(route.screens) as screen}
-  <NavItem
-    icon="ri-artboard-2-line"
-    indentLevel={indent || 1}
-    selected={$store.currentPreviewItem._id === route.screens[screen]}
-    opened={$store.currentPreviewItem._id === route.screens[screen]}
-    text={screen || 'DEFAULT'}
-    withArrow={route.subpaths}
-    on:click={() => changeScreen(route.screens[screen])}>
-    <ScreenDropdownMenu screen={route.screens[screen]} />
-  </NavItem>
-  {#if selectedScreen?._id === route.screens[screen]}
-    <ComponentsTree
-      components={selectedScreen.props._children}
-      currentComponent={$store.currentComponentInfo}
-      {dragDropStore} />
-  {/if}
-{/each}
 {#each Object.keys(route.subpaths) as subpath}
-  <svelte:self route={route.subpaths[subpath]} indent={2} />
+  {#each Object.keys(route.subpaths[subpath].screens) as screen}
+    <NavItem
+      icon="ri-artboard-2-line"
+      indentLevel={indent || 1}
+      selected={$store.currentPreviewItem._id === route.subpaths[subpath].screens[screen]}
+      opened={$store.currentPreviewItem._id === route.subpaths[subpath].screens[screen]}
+      text={subpath}
+      withArrow={route.subpaths}
+      on:click={() => changeScreen(route.subpaths[subpath].screens[screen])}>
+      <ScreenDropdownMenu screen={route.subpaths[subpath].screens[screen]} />
+    </NavItem>
+    {#if selectedScreen?._id === route.subpaths[subpath].screens[screen]}
+      <ComponentsTree
+        components={selectedScreen.props._children}
+        currentComponent={$store.currentComponentInfo}
+        {dragDropStore} />
+    {/if}
+  {/each}
 {/each}
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
index de3a625b74..bd7341be93 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/ScreenDropdownMenu.svelte
@@ -1,6 +1,6 @@
 <script>
   import { goto } from "@sveltech/routify"
-  import { store } from "builderStore"
+  import { store, allScreens } from "builderStore"
   import { notifier } from "builderStore/store/notifications"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import { DropdownMenu } from "@budibase/bbui"
@@ -13,12 +13,13 @@
   let anchor
 
   const deleteScreen = () => {
-    store.actions.screens.delete(screen, $store.currentPageName)
+    const screenToDelete = $allScreens.find(scr => scr._id === screen)
+    store.actions.screens.delete(screenToDelete)
     // update the page if required
     store.update(state => {
       if (state.currentPreviewItem._id === screen._id) {
         store.actions.pages.select($store.currentPageName)
-        notifier.success(`Screen ${screen.name} deleted successfully.`)
+        notifier.success(`Screen ${screenToDelete.name} deleted successfully.`)
         $goto(`./:page/page-layout`)
       }
       return state
diff --git a/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte b/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
index 0063502dd4..ef783b1afd 100644
--- a/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
+++ b/packages/builder/src/components/userInterface/ComponentNavigationTree/index.svelte
@@ -8,6 +8,6 @@
 
 <div class="root">
   {#each Object.keys(routes) as path}
-    <PathTree route={routes[path]} />
+    <PathTree {path} route={routes[path]} />
   {/each}
 </div>
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
deleted file mode 100644
index 78f17613c5..0000000000
--- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
+++ /dev/null
@@ -1,61 +0,0 @@
-<script>
-  import { goto } from "@sveltech/routify"
-  import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
-  import { trimCharsStart, trimChars } from "lodash/fp"
-  import { pipe } from "../../helpers"
-  import { store } from "builderStore"
-  import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
-  import { writable } from "svelte/store"
-  import NavItem from "components/common/NavItem.svelte"
-
-  export let screens = []
-
-  $: sortedScreens = screens.sort((s1, s2) => {
-    const name1 = s1.props._instanceName?.toLowerCase() ?? ""
-    const name2 = s2.props._instanceName?.toLowerCase() ?? ""
-    return name1 > name2 ? 1 : -1
-  })
-  /*
-  Using a store here seems odd.... 
-  have a look in the <ComponentsHierarchyChildren /> code file to find out why. 
-  I have commented the dragDropStore parameter
-  */
-  const dragDropStore = writable({})
-
-  let confirmDeleteDialog
-  let componentToDelete = ""
-
-  const normalizedName = name =>
-    pipe(name, [
-      trimCharsStart("./"),
-      trimCharsStart("~/"),
-      trimCharsStart("../"),
-      trimChars(" "),
-    ])
-
-  const changeScreen = screen => {
-    store.actions.screens.select(screen.props._instanceName)
-    $goto(`./:page/${screen.props._instanceName}`)
-  }
-</script>
-
-<div class="root">
-  {#each sortedScreens as screen}
-    <NavItem
-      icon="ri-artboard-2-line"
-      text={screen.props._instanceName}
-      withArrow={screen.props._children.length}
-      selected={$store.currentComponentInfo._id === screen.props._id}
-      opened={$store.currentPreviewItem.name === screen.props._id}
-      on:click={() => changeScreen(screen)}>
-      <ScreenDropdownMenu {screen} />
-    </NavItem>
-
-    {#if $store.currentPreviewItem.props._instanceName && $store.currentPreviewItem.props._instanceName === screen.props._instanceName && screen.props._children}
-      <ComponentsHierarchyChildren
-        components={screen.props._children}
-        currentComponent={$store.currentComponentInfo}
-        {dragDropStore} />
-    {/if}
-  {/each}
-</div>
diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
deleted file mode 100644
index 5e017ac349..0000000000
--- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
+++ /dev/null
@@ -1,185 +0,0 @@
-<script>
-  import { goto } from "@sveltech/routify"
-  import { store } from "builderStore"
-  import { last } from "lodash/fp"
-  import { pipe } from "../../helpers"
-  import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
-  import NavItem from "components/common/NavItem.svelte"
-  import { getComponentDefinition } from "builderStore/storeUtils"
-
-  export let components = []
-  export let currentComponent
-  export let onSelect = () => {}
-  export let level = 0
-
-  /*
-  "dragDropStore" is a svelte store.
-  This component is recursive... a tree.
-  Using a single, shared store, all the nodes in the tree can subscribe to state that is changed by other nodes, in the same tree.
-
-  e.g. Say i have the structure
-  - Heading 1
-  - Container 
-    - Heading 2
-    - Heading 3
-  - Heading 4
-
-  1. When I dragover "Heading 1", a placeholder drop-slot appears below it
-  2. I drag down a bit so the cursor is INSIDE the container (i.e. now in a child <ComponentsHierarchyChildren />)
-  3. Using store subscribes... the original drop-slot now knows that it should disappear, and a new one is created inside the container.
-  */
-  export let dragDropStore
-
-  let dropUnderComponent
-  let componentToDrop
-
-  const capitalise = s => s.substring(0, 1).toUpperCase() + s.substring(1)
-  const get_name = s => (!s ? "" : last(s.split("/")))
-  const get_capitalised_name = name =>
-    pipe(
-      name,
-      [get_name, capitalise]
-    )
-  const isScreenslot = name => name === "##builtin/screenslot"
-
-  const selectComponent = component => {
-    // Set current component
-    store.actions.components.select(component)
-
-    // Get ID path
-    const path = store.actions.components.findRoute(component)
-
-    // Go to correct URL
-    $goto(`./:page/:screen/${path}`)
-  }
-
-  const dragstart = component => e => {
-    e.dataTransfer.dropEffect = "move"
-    dragDropStore.update(s => {
-      s.componentToDrop = component
-      return s
-    })
-  }
-
-  const dragover = (component, index) => e => {
-    const canHaveChildrenButIsEmpty =
-      getComponentDefinition($store, component._component).children &&
-      component._children.length === 0
-
-    e.dataTransfer.dropEffect = "copy"
-    dragDropStore.update(s => {
-      const isBottomHalf = e.offsetY > e.currentTarget.offsetHeight / 2
-      s.targetComponent = component
-      // only allow dropping inside when container type
-      // is empty. If it has children, the user can drag over
-      // it's existing children
-      if (canHaveChildrenButIsEmpty) {
-        if (index === 0) {
-          // when its the first component in the screen,
-          // we divide into 3, so we can paste above, inside or below
-          const pos = e.offsetY / e.currentTarget.offsetHeight
-          if (pos < 0.4) {
-            s.dropPosition = "above"
-          } else if (pos > 0.8) {
-            // purposely giving this the least space as it is often covered
-            // by the component below's "above" space
-            s.dropPosition = "below"
-          } else {
-            s.dropPosition = "inside"
-          }
-        } else {
-          s.dropPosition = isBottomHalf ? "below" : "inside"
-        }
-      } else {
-        s.dropPosition = isBottomHalf ? "below" : "above"
-      }
-      return s
-    })
-    return false
-  }
-
-  const drop = () => {
-    if ($dragDropStore.targetComponent !== $dragDropStore.componentToDrop) {
-      store.actions.components.copy($dragDropStore.componentToDrop)
-      store.actions.components.paste(
-        $dragDropStore.targetComponent,
-        $dragDropStore.dropPosition
-      )
-    }
-    dragDropStore.update(s => {
-      s.dropPosition = ""
-      s.targetComponent = null
-      s.componentToDrop = null
-      return s
-    })
-  }
-
-  const dragend = () => {
-    dragDropStore.update(s => {
-      s.dropPosition = ""
-      s.targetComponent = null
-      s.componentToDrop = null
-      return s
-    })
-  }
-</script>
-
-<ul>
-  {#each components as component, index (component._id)}
-    <li on:click|stopPropagation={() => selectComponent(component)}>
-      {#if $dragDropStore && $dragDropStore.targetComponent === component && $dragDropStore.dropPosition === 'above'}
-        <div
-          on:drop={drop}
-          ondragover="return false"
-          ondragenter="return false"
-          class="drop-item"
-          style="margin-left: {(level + 1) * 16}px" />
-      {/if}
-
-      <NavItem
-        draggable
-        on:dragend={dragend}
-        on:dragstart={dragstart(component)}
-        on:dragover={dragover(component, index)}
-        on:drop={drop}
-        text={isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
-        withArrow
-        indentLevel={level + 1}
-        selected={currentComponent === component}>
-        <ComponentDropdownMenu {component} />
-      </NavItem>
-
-      {#if component._children}
-        <svelte:self
-          components={component._children}
-          {currentComponent}
-          {onSelect}
-          {dragDropStore}
-          level={level + 1} />
-      {/if}
-
-      {#if $dragDropStore && $dragDropStore.targetComponent === component && ($dragDropStore.dropPosition === 'inside' || $dragDropStore.dropPosition === 'below')}
-        <div
-          on:drop={drop}
-          ondragover="return false"
-          ondragenter="return false"
-          class="drop-item"
-          style="margin-left: {(level + ($dragDropStore.dropPosition === 'inside' ? 3 : 1)) * 16}px" />
-      {/if}
-    </li>
-  {/each}
-</ul>
-
-<style>
-  ul {
-    list-style: none;
-    padding-left: 0;
-    margin: 0;
-  }
-
-  .drop-item {
-    border-radius: var(--border-radius-m);
-    height: 32px;
-    background: var(--grey-3);
-  }
-</style>
diff --git a/packages/builder/src/pages/[application]/design/[page]/[screen]/_layout.svelte b/packages/builder/src/pages/[application]/design/[page]/[screen]/_layout.svelte
index d67f365135..99434b7cd5 100644
--- a/packages/builder/src/pages/[application]/design/[page]/[screen]/_layout.svelte
+++ b/packages/builder/src/pages/[application]/design/[page]/[screen]/_layout.svelte
@@ -25,8 +25,8 @@
         // Get the correct screen children.
         const screenChildren = $store.pages[$params.page]._screens.find(
           screen =>
-            screen.props._instanceName === $params.screen ||
-            screen.props._instanceName === decodeURIComponent($params.screen)
+            screen._id === $params.screen ||
+            screen._id === decodeURIComponent($params.screen)
         ).props._children
         findComponent(componentIds, screenChildren)
       }