diff --git a/packages/builder/src/BackendRoot.svelte b/packages/builder/src/BackendRoot.svelte
deleted file mode 100644
index f127c803cb..0000000000
--- a/packages/builder/src/BackendRoot.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script>
-  import BackendNav from "components/nav/BackendNav.svelte"
-  import SchemaManagementDrawer from "components/nav/SchemaManagementDrawer.svelte"
-  import Database from "components/database/DatabaseRoot.svelte"
-  import UserInterface from "components/userInterface/UserInterfaceRoot.svelte"
-  import ActionsAndTriggers from "components/actionsAndTriggers/ActionsAndTriggersRoot.svelte"
-  import AccessLevels from "components/accessLevels/AccessLevelsRoot.svelte"
-  import ComingSoon from "components/common/ComingSoon.svelte"
-
-  import { store, backendUiStore } from "builderStore"
-</script>
-
-<div class="root">
-  <div class="nav">
-    <BackendNav />
-  </div>
-  <div class="content">
-    {#if $backendUiStore.leftNavItem === 'DATABASE'}
-      <Database />
-    {:else if $backendUiStore.leftNavItem === 'ACTIONS'}
-      <ActionsAndTriggers />
-    {:else if $backendUiStore.leftNavItem === 'ACCESS_LEVELS'}
-      <AccessLevels />
-    {/if}
-  </div>
-  <div class="nav">
-    <SchemaManagementDrawer />
-  </div>
-</div>
-
-<style>
-  .root {
-    height: 100%;
-    display: flex;
-    background: #fafafa;
-  }
-
-  .content {
-    flex: 1 1 auto;
-    margin: 20px 40px;
-  }
-
-  .nav {
-    overflow: auto;
-    flex: 0 1 auto;
-    width: 275px;
-    height: 100%;
-  }
-</style>
diff --git a/packages/builder/src/NoPackage.svelte b/packages/builder/src/NoPackage.svelte
deleted file mode 100644
index c15df26036..0000000000
--- a/packages/builder/src/NoPackage.svelte
+++ /dev/null
@@ -1,55 +0,0 @@
-<script>
-  import Button from "components/common/Button.svelte"
-  import { store } from "builderStore"
-
-  let errors = []
-</script>
-
-<div class="root">
-  <div class="inner">
-    <img
-      src="/_builder/assets/budibase-logo.png"
-      class="logo"
-      alt="budibase logo" />
-    <div>
-
-      <div>
-        <h4 style="margin-bottom: 20px">Choose an Application</h4>
-        {#each $store.apps as app}
-          <a href={`#${app}`} class="app-link">{app}</a>
-        {/each}
-      </div>
-    </div>
-  </div>
-</div>
-
-<style>
-  .root {
-    position: fixed;
-    margin: 0 auto;
-    text-align: center;
-    top: 20%;
-    /*color: #333333;
-    background-color: #fdfdfd;*/
-    width: 100%;
-  }
-
-  .inner {
-    display: inline-block;
-    margin: auto;
-  }
-
-  .logo {
-    width: 300px;
-    margin-bottom: 40px;
-  }
-
-  .root :global(.option) {
-    width: 250px;
-  }
-
-  .app-link {
-    margin-top: 10px;
-    display: block;
-  }
-</style>
diff --git a/packages/builder/src/PackageRoot.svelte b/packages/builder/src/PackageRoot.svelte
deleted file mode 100644
index 71660ec2e8..0000000000
--- a/packages/builder/src/PackageRoot.svelte
+++ /dev/null
@@ -1,172 +0,0 @@
-<script>
-  import IconButton from "components/common/IconButton.svelte"
-  import { store } from "builderStore"
-  import UserInterfaceRoot from "components/userInterface/UserInterfaceRoot.svelte"
-  import BackendRoot from "./BackendRoot.svelte"
-  import { fade } from "svelte/transition"
-  import { SettingsIcon, PreviewIcon } from "components/common/Icons/"
-
-  const TABS = {
-    BACKEND: "backend",
-    FRONTEND: "frontend",
-  }
-
-  let selectedTab = TABS.BACKEND
-</script>
-
-<div class="root">
-
-  <div class="top-nav">
-    <div class="topleftnav">
-      <button class="home-logo">
-        <img src="/_builder/assets/budibase-emblem-white.svg" />
-      </button>
-      <!-- <IconButton icon="home"
-                      color="var(--slate)"
-                      hoverColor="var(--secondary75)"/> -->
-      <span
-        class:active={selectedTab === TABS.BACKEND}
-        class="topnavitem"
-        on:click={() => (selectedTab = TABS.BACKEND)}>
-        Backend
-      </span>
-      <span
-        class:active={selectedTab === TABS.FRONTEND}
-        class="topnavitem"
-        on:click={() => (selectedTab = TABS.FRONTEND)}>
-        Frontend
-      </span>
-    </div>
-
-    <div class="toprightnav">
-      <span
-        class:active={selectedTab === TABS.FRONTEND}
-        class="topnavitemright"
-        on:click={() => selectedTab === TABS.FRONTEND}>
-        <SettingsIcon />
-      </span>
-      <span
-        class:active={selectedTab === TABS.FRONTEND}
-        class="topnavitemright"
-        on:click={() => selectedTab === TABS.FRONTEND}>
-        <PreviewIcon />
-      </span>
-    </div>
-  </div>
-
-  <div class="content">
-    {#if selectedTab === TABS.BACKEND}
-      <div in:fade out:fade>
-        <BackendRoot />
-      </div>
-    {:else}
-      <div in:fade out:fade>
-        <UserInterfaceRoot />
-      </div>
-    {/if}
-  </div>
-
-</div>
-
-<style>
-  .root {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .top-nav {
-    flex: 0 0 auto;
-    height: 48px;
-    background: #0d203b;
-    padding: 0px 20px 0 20px;
-    display: flex;
-    box-sizing: border-box;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .content {
-    flex: 1 1 auto;
-    width: 100%;
-    height: 100px;
-    overflow: hidden;
-  }
-
-  .content > div {
-    height: 100%;
-    width: 100%;
-  }
-
-  .toprightnav {
-    display: flex;
-  }
-
-  .topleftnav {
-    display: flex;
-    align-items: center;
-  }
-
-  .topnavitem {
-    cursor: pointer;
-    color: rgb(255, 255, 255, 0.6);
-    margin: 0px 10px;
-    padding-top: 4px;
-    font-weight: 500;
-    font-size: 1rem;
-    height: 100%;
-    align-items: center;
-    box-sizing: border-box;
-  }
-
-  .topnavitem:hover {
-    color: rgb(255, 255, 255, 0.8);
-    font-weight: 500;
-  }
-
-  .active {
-    color: white;
-    font-weight: 600;
-  }
-
-  .topnavitemright {
-    cursor: pointer;
-    color: rgb(255, 255, 255, 0.6);
-    margin: 0px 5px;
-    padding-top: 4px;
-    font-weight: 500;
-    font-size: 1rem;
-    height: 100%;
-    display: flex;
-    flex: 1;
-    align-items: center;
-    box-sizing: border-box;
-  }
-
-  .topnavitemright:hover {
-    color: rgb(255, 255, 255, 0.8);
-    font-weight: 500;
-  }
-
-  .home-logo {
-    border-style: none;
-    background-color: rgba(0, 0, 0, 0);
-    cursor: pointer;
-    outline: none;
-    height: 40px;
-    padding: 8px 10px 8px 0;
-  }
-
-  .home-logo:hover {
-    color: var(--hovercolor);
-  }
-
-  .home-logo:active {
-    outline: none;
-  }
-
-  .home-logo img {
-    height: 100%;
-  }
-</style>