diff --git a/packages/builder/src/components/database/IndexView.svelte b/packages/builder/src/components/database/IndexView.svelte
deleted file mode 100644
index 0b8884b989..0000000000
--- a/packages/builder/src/components/database/IndexView.svelte
+++ /dev/null
@@ -1,151 +0,0 @@
-<script>
-  import Textbox from "components/common/Textbox.svelte"
-  import CodeArea from "components/common/CodeArea.svelte"
-  import Button from "components/common/Button.svelte"
-  import Dropdown from "components/common/Dropdown.svelte"
-  import { store } from "builderStore"
-  import { filter, some, map, compose } from "lodash/fp"
-  import {
-    hierarchy as hierarchyFunctions,
-    common,
-  } from "../../../../core/src/"
-  import ErrorsBox from "components/common/ErrorsBox.svelte"
-  import ActionButton from "components/common/ActionButton.svelte"
-
-  const SNIPPET_EDITORS = {
-    MAP: "Map",
-    FILTER: "Filter",
-    SHARD: "Shard Name",
-  }
-
-  let index
-  let indexableRecords = []
-  let currentSnippetEditor = SNIPPET_EDITORS.MAP
-
-  const indexableRecordsFromIndex = compose(
-    map(node => ({
-      node,
-      isallowed:
-        index.allowedRecordNodeIds &&
-        index.allowedRecordNodeIds.some(id => node.nodeId === id),
-    })),
-    filter(hierarchyFunctions.isRecord),
-    filter(hierarchyFunctions.isDecendant($store.currentNode.parent())),
-    hierarchyFunctions.getFlattenedHierarchy
-  )
-
-  store.subscribe($store => {
-    index = $store.currentNode
-    indexableRecords = indexableRecordsFromIndex($store.hierarchy)
-  })
-
-  const toggleAllowedRecord = record => {
-    if (record.isallowed) {
-      index.allowedRecordNodeIds = index.allowedRecordNodeIds.filter(
-        id => id !== record.node.nodeId
-      )
-    } else {
-      index.allowedRecordNodeIds.push(record.node.nodeId)
-    }
-  }
-</script>
-
-<heading>
-  <i class="ri-eye-line button--toggled" />
-  <h3 class="budibase__title--3">Create / Edit View</h3>
-</heading>
-<form on:submit|preventDefault class="uk-form-stacked root">
-  <h4 class="budibase__label--big">Settings</h4>
-  {#if $store.errors && $store.errors.length > 0}
-    <ErrorsBox errors={$store.errors} />
-  {/if}
-  <div class="uk-grid-small" uk-grid>
-    <div class="uk-width-1-2@s">
-      <Textbox bind:text={index.name} label="Name" />
-    </div>
-    <div class="uk-width-1-2@s">
-      <Dropdown
-        label="View Type"
-        bind:selected={index.indexType}
-        options={['ancestor', 'reference']} />
-    </div>
-  </div>
-
-  <div class="allowed-records">
-    <div class="budibase__label--big">
-      Which models would you like to add to this view?
-    </div>
-    {#each indexableRecords as rec}
-      <input
-        class="uk-checkbox"
-        type="checkbox"
-        checked={rec.isallowed}
-        on:change={() => toggleAllowedRecord(rec)} />
-      <span class="checkbox-model-label">{rec.node.name}</span>
-    {/each}
-  </div>
-
-  <h4 class="budibase__label--big">Snippets</h4>
-  {#each Object.values(SNIPPET_EDITORS) as snippetType}
-    <span
-      class="snippet-selector__heading hoverable"
-      class:highlighted={currentSnippetEditor === snippetType}
-      on:click={() => (currentSnippetEditor = snippetType)}>
-      {snippetType}
-    </span>
-  {/each}
-  {#if currentSnippetEditor === SNIPPET_EDITORS.MAP}
-    <CodeArea bind:text={index.map} label="Map" />
-  {:else if currentSnippetEditor === SNIPPET_EDITORS.FILTER}
-    <CodeArea bind:text={index.filter} label="Filter" />
-  {:else if currentSnippetEditor === SNIPPET_EDITORS.SHARD}
-    <CodeArea bind:text={index.getShardName} label="Shard Name" />
-  {/if}
-
-  <ActionButton color="secondary" on:click={store.saveCurrentNode}>
-    Save
-  </ActionButton>
-
-  {#if !$store.currentNodeIsNew}
-    <ActionButton alert on:click={store.deleteCurrentNode}>Delete</ActionButton>
-  {/if}
-
-</form>
-
-<style>
-  .root {
-    height: 100%;
-    padding: 15px;
-  }
-
-  .allowed-records {
-    margin: 20px 0px;
-  }
-
-  .allowed-records > span {
-    margin-right: 30px;
-  }
-
-  .snippet-selector__heading {
-    margin-right: 20px;
-    opacity: 0.7;
-  }
-
-  .highlighted {
-    opacity: 1;
-  }
-
-  .checkbox-model-label {
-    text-transform: capitalize;
-  }
-
-  h3 {
-    margin: 0 0 0 10px;
-  }
-
-  heading {
-    padding: 20px 20px 0 20px;
-    display: flex;
-    align-items: center;
-  }
-</style>
diff --git a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
index 1c025d039b..7d88dfd864 100644
--- a/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
+++ b/packages/builder/src/components/database/ModelDataTable/modals/CreateEditView.svelte
@@ -1,7 +1,151 @@
 <script>
-  import IndexView from "../../IndexView.svelte"
+  import Textbox from "components/common/Textbox.svelte"
+  import CodeArea from "components/common/CodeArea.svelte"
+  import Button from "components/common/Button.svelte"
+  import Dropdown from "components/common/Dropdown.svelte"
+  import { store } from "builderStore"
+  import { filter, some, map, compose } from "lodash/fp"
+  import {
+    hierarchy as hierarchyFunctions,
+    common,
+  } from "../../../../../../core/src/"
+  import ErrorsBox from "components/common/ErrorsBox.svelte"
+  import ActionButton from "components/common/ActionButton.svelte"
+
+  const SNIPPET_EDITORS = {
+    MAP: "Map",
+    FILTER: "Filter",
+    SHARD: "Shard Name",
+  }
+
+  let index
+  let indexableModels = []
+  let currentSnippetEditor = SNIPPET_EDITORS.MAP
+
+  const indexableModelsFromIndex = compose(
+    map(node => ({
+      node,
+      isallowed:
+        index.allowedRecordNodeIds &&
+        index.allowedRecordNodeIds.some(id => node.nodeId === id),
+    })),
+    filter(hierarchyFunctions.isRecord),
+    filter(hierarchyFunctions.isDecendant($store.currentNode.parent())),
+    hierarchyFunctions.getFlattenedHierarchy
+  )
+
+  store.subscribe($store => {
+    index = $store.currentNode
+    indexableModels = indexableModelsFromIndex($store.hierarchy)
+  })
+
+  const toggleAllowedModel = model => {
+    if (model.isallowed) {
+      index.allowedRecordNodeIds = index.allowedRecordNodeIds.filter(
+        id => id !== model.node.nodeId
+      )
+    } else {
+      index.allowedRecordNodeIds.push(model.node.nodeId)
+    }
+  }
 </script>
 
-<section>
-  <IndexView />
-</section>
+<heading>
+  <i class="ri-eye-line button--toggled" />
+  <h3 class="budibase__title--3">Create / Edit View</h3>
+</heading>
+<form on:submit|preventDefault class="uk-form-stacked root">
+  <h4 class="budibase__label--big">Settings</h4>
+  {#if $store.errors && $store.errors.length > 0}
+    <ErrorsBox errors={$store.errors} />
+  {/if}
+  <div class="uk-grid-small" uk-grid>
+    <div class="uk-width-1-2@s">
+      <Textbox bind:text={index.name} label="Name" />
+    </div>
+    <div class="uk-width-1-2@s">
+      <Dropdown
+        label="View Type"
+        bind:selected={index.indexType}
+        options={['ancestor', 'reference']} />
+    </div>
+  </div>
+
+  <div class="allowed-records">
+    <div class="budibase__label--big">
+      Which models would you like to add to this view?
+    </div>
+    {#each indexableModels as model}
+      <input
+        class="uk-checkbox"
+        type="checkbox"
+        checked={model.isallowed}
+        on:change={() => toggleAllowedModel(model)} />
+      <span class="checkbox-model-label">{model.node.name}</span>
+    {/each}
+  </div>
+
+  <h4 class="budibase__label--big">Snippets</h4>
+  {#each Object.values(SNIPPET_EDITORS) as snippetType}
+    <span
+      class="snippet-selector__heading hoverable"
+      class:highlighted={currentSnippetEditor === snippetType}
+      on:click={() => (currentSnippetEditor = snippetType)}>
+      {snippetType}
+    </span>
+  {/each}
+  {#if currentSnippetEditor === SNIPPET_EDITORS.MAP}
+    <CodeArea bind:text={index.map} label="Map" />
+  {:else if currentSnippetEditor === SNIPPET_EDITORS.FILTER}
+    <CodeArea bind:text={index.filter} label="Filter" />
+  {:else if currentSnippetEditor === SNIPPET_EDITORS.SHARD}
+    <CodeArea bind:text={index.getShardName} label="Shard Name" />
+  {/if}
+
+  <ActionButton color="secondary" on:click={store.saveCurrentNode}>
+    Save
+  </ActionButton>
+
+  {#if !$store.currentNodeIsNew}
+    <ActionButton alert on:click={store.deleteCurrentNode}>Delete</ActionButton>
+  {/if}
+
+</form>
+
+<style>
+  .root {
+    height: 100%;
+    padding: 15px;
+  }
+
+  .allowed-records {
+    margin: 20px 0px;
+  }
+
+  .allowed-records > span {
+    margin-right: 30px;
+  }
+
+  .snippet-selector__heading {
+    margin-right: 20px;
+    opacity: 0.7;
+  }
+
+  .highlighted {
+    opacity: 1;
+  }
+
+  .checkbox-model-label {
+    text-transform: capitalize;
+  }
+
+  h3 {
+    margin: 0 0 0 10px;
+  }
+
+  heading {
+    padding: 20px 20px 0 20px;
+    display: flex;
+    align-items: center;
+  }
+</style>