diff --git a/packages/builder/src/components/database/DataTable/AttachmentList.svelte b/packages/builder/src/components/backend/DataTable/AttachmentList.svelte
similarity index 100%
rename from packages/builder/src/components/database/DataTable/AttachmentList.svelte
rename to packages/builder/src/components/backend/DataTable/AttachmentList.svelte
diff --git a/packages/builder/src/components/database/DataTable/LinkedRecord.svelte b/packages/builder/src/components/backend/DataTable/LinkedRecord.svelte
similarity index 100%
rename from packages/builder/src/components/database/DataTable/LinkedRecord.svelte
rename to packages/builder/src/components/backend/DataTable/LinkedRecord.svelte
diff --git a/packages/builder/src/components/database/DataTable/ModelDataTable.svelte b/packages/builder/src/components/backend/DataTable/ModelDataTable.svelte
similarity index 100%
rename from packages/builder/src/components/database/DataTable/ModelDataTable.svelte
rename to packages/builder/src/components/backend/DataTable/ModelDataTable.svelte
diff --git a/packages/builder/src/components/database/DataTable/Table.svelte b/packages/builder/src/components/backend/DataTable/Table.svelte
similarity index 100%
rename from packages/builder/src/components/database/DataTable/Table.svelte
rename to packages/builder/src/components/backend/DataTable/Table.svelte
diff --git a/packages/builder/src/components/database/DataTable/TablePagination.svelte b/packages/builder/src/components/backend/DataTable/TablePagination.svelte
similarity index 100%
rename from packages/builder/src/components/database/DataTable/TablePagination.svelte
rename to packages/builder/src/components/backend/DataTable/TablePagination.svelte
diff --git a/packages/builder/src/components/database/DataTable/ViewDataTable.svelte b/packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
similarity index 100%
rename from packages/builder/src/components/database/DataTable/ViewDataTable.svelte
rename to packages/builder/src/components/backend/DataTable/ViewDataTable.svelte
diff --git a/packages/builder/src/components/database/DataTable/api.js b/packages/builder/src/components/backend/DataTable/api.js
similarity index 100%
rename from packages/builder/src/components/database/DataTable/api.js
rename to packages/builder/src/components/backend/DataTable/api.js
diff --git a/packages/builder/src/components/database/DataTable/index.js b/packages/builder/src/components/backend/DataTable/index.js
similarity index 100%
rename from packages/builder/src/components/database/DataTable/index.js
rename to packages/builder/src/components/backend/DataTable/index.js
diff --git a/packages/builder/src/components/database/DataTable/modals/CreateEditColumn.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
similarity index 99%
rename from packages/builder/src/components/database/DataTable/modals/CreateEditColumn.svelte
rename to packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
index cb553623b9..a6a1bff953 100644
--- a/packages/builder/src/components/database/DataTable/modals/CreateEditColumn.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
@@ -52,7 +52,7 @@
   }
 </script>
 
-<div class="container">
+<div class="actions">
   <Input placeholder="Name" thin bind:value={field.name} />
 
   <Select
@@ -110,7 +110,7 @@
 </div>
 
 <style>
-  .container {
+  .actions {
     padding: var(--spacing-xl);
     display: grid;
     grid-gap: var(--spacing-xl);
diff --git a/packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte b/packages/builder/src/components/backend/DataTable/modals/CreateEditRecord.svelte
similarity index 98%
rename from packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte
rename to packages/builder/src/components/backend/DataTable/modals/CreateEditRecord.svelte
index 71439d840a..9c6aa9bf15 100644
--- a/packages/builder/src/components/database/DataTable/modals/CreateEditRecord.svelte
+++ b/packages/builder/src/components/backend/DataTable/modals/CreateEditRecord.svelte
@@ -40,7 +40,7 @@
   }
 </script>
 
-<div class="container">
+<div class="actions">
   <ErrorsBox {errors} />
   <form on:submit|preventDefault>
     {#each modelSchema as [key, meta]}
@@ -63,7 +63,7 @@
 </div>
 
 <style>
-  .container {
+  .actions {
     padding: var(--spacing-xl);
     display: grid;
     grid-gap: var(--spacing-xl);
diff --git a/packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte b/packages/builder/src/components/backend/DataTable/modals/RecordFieldControl.svelte
similarity index 100%
rename from packages/builder/src/components/database/DataTable/modals/RecordFieldControl.svelte
rename to packages/builder/src/components/backend/DataTable/modals/RecordFieldControl.svelte
diff --git a/packages/builder/src/components/database/DataTable/modals/index.js b/packages/builder/src/components/backend/DataTable/modals/index.js
similarity index 100%
rename from packages/builder/src/components/database/DataTable/modals/index.js
rename to packages/builder/src/components/backend/DataTable/modals/index.js
diff --git a/packages/builder/src/components/database/DataTable/popovers/Calculate.svelte b/packages/builder/src/components/backend/DataTable/popovers/Calculate.svelte
similarity index 98%
rename from packages/builder/src/components/database/DataTable/popovers/Calculate.svelte
rename to packages/builder/src/components/backend/DataTable/popovers/Calculate.svelte
index 0723394f4b..5497c4d455 100644
--- a/packages/builder/src/components/database/DataTable/popovers/Calculate.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/Calculate.svelte
@@ -46,7 +46,7 @@
   </TextButton>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
-  <div class="container">
+  <div class="actions">
     <h5>Calculate</h5>
     <div class="input-group-row">
       <p>The</p>
@@ -72,7 +72,7 @@
 </Popover>
 
 <style>
-  .container {
+  .actions {
     display: grid;
     grid-gap: var(--spacing-xl);
   }
diff --git a/packages/builder/src/components/database/DataTable/popovers/Column.svelte b/packages/builder/src/components/backend/DataTable/popovers/Column.svelte
similarity index 100%
rename from packages/builder/src/components/database/DataTable/popovers/Column.svelte
rename to packages/builder/src/components/backend/DataTable/popovers/Column.svelte
diff --git a/packages/builder/src/components/database/DataTable/popovers/ColumnHeader.svelte b/packages/builder/src/components/backend/DataTable/popovers/ColumnHeader.svelte
similarity index 100%
rename from packages/builder/src/components/database/DataTable/popovers/ColumnHeader.svelte
rename to packages/builder/src/components/backend/DataTable/popovers/ColumnHeader.svelte
diff --git a/packages/builder/src/components/database/DataTable/popovers/EditRow.svelte b/packages/builder/src/components/backend/DataTable/popovers/EditRow.svelte
similarity index 100%
rename from packages/builder/src/components/database/DataTable/popovers/EditRow.svelte
rename to packages/builder/src/components/backend/DataTable/popovers/EditRow.svelte
diff --git a/packages/builder/src/components/database/DataTable/popovers/Filter.svelte b/packages/builder/src/components/backend/DataTable/popovers/Filter.svelte
similarity index 99%
rename from packages/builder/src/components/database/DataTable/popovers/Filter.svelte
rename to packages/builder/src/components/backend/DataTable/popovers/Filter.svelte
index c05bd2b856..ed064926e8 100644
--- a/packages/builder/src/components/database/DataTable/popovers/Filter.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/Filter.svelte
@@ -95,7 +95,7 @@
   </TextButton>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
-  <div class="container">
+  <div class="actions">
     <h5>Filter</h5>
     {#if view.filters.length}
       <div class="input-group-row">
@@ -150,7 +150,7 @@
 </Popover>
 
 <style>
-  .container {
+  .actions {
     display: grid;
     grid-gap: var(--spacing-xl);
   }
diff --git a/packages/builder/src/components/database/DataTable/popovers/GroupBy.svelte b/packages/builder/src/components/backend/DataTable/popovers/GroupBy.svelte
similarity index 97%
rename from packages/builder/src/components/database/DataTable/popovers/GroupBy.svelte
rename to packages/builder/src/components/backend/DataTable/popovers/GroupBy.svelte
index 3e9f8c06f5..152d59a1a5 100644
--- a/packages/builder/src/components/database/DataTable/popovers/GroupBy.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/GroupBy.svelte
@@ -42,7 +42,7 @@
   </TextButton>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
-  <div class="container">
+  <div class="actions">
     <h5>Group By</h5>
     <div class="input-group-row">
       <p>Group By</p>
@@ -61,7 +61,7 @@
 </Popover>
 
 <style>
-  .container {
+  .actions {
     display: grid;
     grid-gap: var(--spacing-xl);
   }
diff --git a/packages/builder/src/components/database/DataTable/popovers/Row.svelte b/packages/builder/src/components/backend/DataTable/popovers/Row.svelte
similarity index 100%
rename from packages/builder/src/components/database/DataTable/popovers/Row.svelte
rename to packages/builder/src/components/backend/DataTable/popovers/Row.svelte
diff --git a/packages/builder/src/components/database/DataTable/popovers/View.svelte b/packages/builder/src/components/backend/DataTable/popovers/View.svelte
similarity index 97%
rename from packages/builder/src/components/database/DataTable/popovers/View.svelte
rename to packages/builder/src/components/backend/DataTable/popovers/View.svelte
index 48c36f4a04..0f44af872d 100644
--- a/packages/builder/src/components/database/DataTable/popovers/View.svelte
+++ b/packages/builder/src/components/backend/DataTable/popovers/View.svelte
@@ -48,7 +48,7 @@
   </TextButton>
 </div>
 <Popover bind:this={dropdown} {anchor} align="left">
-  <div class="container">
+  <div class="actions">
     <h5>Create View</h5>
     <Input placeholder="View Name" thin bind:value={name} />
     <div class="footer">
@@ -64,7 +64,7 @@
     font-weight: 500;
   }
 
-  .container {
+  .actions {
     display: grid;
     grid-gap: var(--spacing-xl);
   }
diff --git a/packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte b/packages/builder/src/components/backend/ModelNavigator/CreateTable.svelte
similarity index 97%
rename from packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte
rename to packages/builder/src/components/backend/ModelNavigator/CreateTable.svelte
index edc4229a87..2c84e2f42b 100644
--- a/packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte
+++ b/packages/builder/src/components/backend/ModelNavigator/CreateTable.svelte
@@ -31,7 +31,7 @@
   <Button primary wide on:click={dropdown.show}>Create New Table</Button>
 </div>
 <DropdownMenu bind:this={dropdown} {anchor} align="left">
-  <div class="container">
+  <div class="actions">
     <h5>Create Table</h5>
     <Input
       data-cy="table-name-input"
@@ -46,7 +46,7 @@
 </DropdownMenu>
 
 <style>
-  .container {
+  .actions {
     padding: var(--spacing-xl);
     display: grid;
     grid-gap: var(--spacing-xl);
diff --git a/packages/builder/src/components/nav/ModelNavigator/EditTable.svelte b/packages/builder/src/components/backend/ModelNavigator/EditTable.svelte
similarity index 98%
rename from packages/builder/src/components/nav/ModelNavigator/EditTable.svelte
rename to packages/builder/src/components/backend/ModelNavigator/EditTable.svelte
index 62676d6c6e..c7398838a7 100644
--- a/packages/builder/src/components/nav/ModelNavigator/EditTable.svelte
+++ b/packages/builder/src/components/backend/ModelNavigator/EditTable.svelte
@@ -40,7 +40,7 @@
 </div>
 <DropdownMenu align="left" {anchor} bind:this={dropdown}>
   {#if editing}
-    <div class="container">
+    <div class="actions">
       <h5>Edit Table</h5>
       <Input placeholder="Table Name" thin bind:value={table.name} />
       <footer>
@@ -80,7 +80,7 @@
     font-size: 16px;
   }
 
-  .container {
+  .actions {
     padding: var(--spacing-xl);
     display: grid;
     grid-gap: var(--spacing-xl);
diff --git a/packages/builder/src/components/nav/ModelNavigator/EditView.svelte b/packages/builder/src/components/backend/ModelNavigator/EditView.svelte
similarity index 98%
rename from packages/builder/src/components/nav/ModelNavigator/EditView.svelte
rename to packages/builder/src/components/backend/ModelNavigator/EditView.svelte
index 83d1c9ef13..df7f6232da 100644
--- a/packages/builder/src/components/nav/ModelNavigator/EditView.svelte
+++ b/packages/builder/src/components/backend/ModelNavigator/EditView.svelte
@@ -48,7 +48,7 @@
 </div>
 <DropdownMenu align="left" {anchor} bind:this={dropdown}>
   {#if editing}
-    <div class="container">
+    <div class="actions">
       <h5>Edit View</h5>
       <Input placeholder="View Name" thin bind:value={view.name} />
       <footer>
@@ -88,7 +88,7 @@
     font-size: 16px;
   }
 
-  .container {
+  .actions {
     padding: var(--spacing-xl);
     display: grid;
     grid-gap: var(--spacing-xl);
diff --git a/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte b/packages/builder/src/components/backend/ModelNavigator/ListItem.svelte
similarity index 100%
rename from packages/builder/src/components/nav/ModelNavigator/ListItem.svelte
rename to packages/builder/src/components/backend/ModelNavigator/ListItem.svelte
diff --git a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte b/packages/builder/src/components/backend/ModelNavigator/ModelNavigator.svelte
similarity index 97%
rename from packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
rename to packages/builder/src/components/backend/ModelNavigator/ModelNavigator.svelte
index 8caea51905..e92903ae3c 100644
--- a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
+++ b/packages/builder/src/components/backend/ModelNavigator/ModelNavigator.svelte
@@ -30,7 +30,7 @@
   {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
     <div class="hierarchy">
       <div class="components-list-container">
-        <div class="title">Tables</div>
+        <h5>Tables</h5>
         <CreateTablePopover />
         <div class="hierarchy-items-container">
           {#each $backendUiStore.models as model}
@@ -63,9 +63,10 @@
 </div>
 
 <style>
-  .title {
+  h5 {
     font-size: 18px;
     font-weight: 600;
+    margin-top: 0;
     margin-bottom: var(--spacing-xl);
   }
 
diff --git a/packages/builder/src/components/nav/NavItem.svelte b/packages/builder/src/components/nav/NavItem.svelte
deleted file mode 100644
index 002c4e0802..0000000000
--- a/packages/builder/src/components/nav/NavItem.svelte
+++ /dev/null
@@ -1,20 +0,0 @@
-<script>
-  import { isActive, url, goto } from "@sveltech/routify"
-
-  export let label = ""
-  export let href
-</script>
-
-<div
-  on:click={() => $goto(href)}
-  class="budibase__nav-item backend-nav-item"
-  class:selected={$isActive(href)}>
-  {label}
-</div>
-
-<style>
-  .backend-nav-item {
-    padding-left: 25px;
-    cursor: pointer;
-  }
-</style>
diff --git a/packages/builder/src/pages/[application]/backend/_layout.svelte b/packages/builder/src/pages/[application]/backend/_layout.svelte
index 8dae59d113..fdea444e44 100644
--- a/packages/builder/src/pages/[application]/backend/_layout.svelte
+++ b/packages/builder/src/pages/[application]/backend/_layout.svelte
@@ -1,8 +1,8 @@
 <script>
   import { getContext } from "svelte"
   import { store, backendUiStore } from "builderStore"
-  import * as api from "components/database/DataTable/api"
-  import ModelNavigator from "components/nav/ModelNavigator/ModelNavigator.svelte"
+  import * as api from "components/backend/DataTable/api"
+  import ModelNavigator from "components/backend/ModelNavigator/ModelNavigator.svelte"
 </script>
 
 <!-- routify:options index=1 -->
diff --git a/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte
index 277b3877e9..30f252b78d 100644
--- a/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte
+++ b/packages/builder/src/pages/[application]/backend/model/[selectedModel]/index.svelte
@@ -1,11 +1,11 @@
 <script>
   import { getContext } from "svelte"
   import { Button } from "@budibase/bbui"
-  import ModelDataTable from "components/database/DataTable"
+  import ModelDataTable from "components/backend/DataTable"
   import { backendUiStore } from "builderStore"
   import ActionButton from "components/common/ActionButton.svelte"
-  import * as api from "components/database/DataTable/api"
-  import { CreateEditRecordModal } from "components/database/DataTable/modals"
+  import * as api from "components/backend/DataTable/api"
+  import { CreateEditRecordModal } from "components/backend/DataTable/modals"
 
   const { open, close } = getContext("simple-modal")
 
@@ -15,12 +15,13 @@
 {#if $backendUiStore.selectedDatabase._id && selectedModel.name}
   <ModelDataTable />
 {:else}
-  <i style="color: var(--grey-4)">create your first table to start building</i>
+  <i>Create your first table to start building</i>
 {/if}
 
 <style>
   i {
     font-size: 20px;
-    margin-right: 10px;
+    padding-bottom: 10px;
+    color: var(--grey-4);
   }
 </style>
diff --git a/packages/builder/src/pages/[application]/backend/model/_layout.svelte b/packages/builder/src/pages/[application]/backend/model/_layout.svelte
index d9a69b4250..74e14a5ad4 100644
--- a/packages/builder/src/pages/[application]/backend/model/_layout.svelte
+++ b/packages/builder/src/pages/[application]/backend/model/_layout.svelte
@@ -21,9 +21,7 @@
 </script>
 
 <div class="root">
-  <div class="node-view">
-    <slot />
-  </div>
+  <slot />
 </div>
 
 <style>
@@ -31,9 +29,4 @@
     height: 100%;
     position: relative;
   }
-
-  .node-view {
-    overflow-y: auto;
-    flex: 1 1 auto;
-  }
 </style>
diff --git a/packages/builder/src/pages/[application]/backend/model/index.svelte b/packages/builder/src/pages/[application]/backend/model/index.svelte
index 101655ddb9..255c92ff26 100644
--- a/packages/builder/src/pages/[application]/backend/model/index.svelte
+++ b/packages/builder/src/pages/[application]/backend/model/index.svelte
@@ -22,5 +22,13 @@
 </script>
 
 {#if $backendUiStore.models.length === 0}
-  Please create a table
+  <i>Create your first table to start building</i>
 {:else}Please select a table{/if}
+
+<style>
+  i {
+    font-size: 20px;
+    padding-bottom: 10px;
+    color: var(--grey-4);
+  }
+</style>
diff --git a/packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte b/packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte
index 55044286e3..2aedd4fe3b 100644
--- a/packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte
+++ b/packages/builder/src/pages/[application]/backend/view/[selectedView]/index.svelte
@@ -1,11 +1,11 @@
 <script>
   import { getContext } from "svelte"
   import { Button } from "@budibase/bbui"
-  import ViewDataTable from "components/database/DataTable/ViewDataTable"
+  import ViewDataTable from "components/backend/DataTable/ViewDataTable"
   import { backendUiStore } from "builderStore"
   import ActionButton from "components/common/ActionButton.svelte"
-  import * as api from "components/database/DataTable/api"
-  import { CreateEditRecordModal } from "components/database/DataTable/modals"
+  import * as api from "components/backend/DataTable/api"
+  import { CreateEditRecordModal } from "components/backend/DataTable/modals"
 
   const { open, close } = getContext("simple-modal")