diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js
index 62ebd39682..e7cdcd7e29 100644
--- a/packages/builder/src/builderStore/store/backend.js
+++ b/packages/builder/src/builderStore/store/backend.js
@@ -1,5 +1,13 @@
 import { writable } from "svelte/store"
 import api from "../api"
+import { getContext } from "svelte"
+
+/** TODO: DEMO SOLUTION
+ * this section should not be here, it is a quick fix for a demo
+ * when we reorg the backend UI, this should disappear
+ *  **/
+import { CreateEditModelModal } from "components/database/ModelDataTable/modals"
+/** DEMO SOLUTION  END **/
 
 export const getBackendUiStore = () => {
   const INITIAL_BACKEND_UI_STATE = {
@@ -22,11 +30,24 @@ export const getBackendUiStore = () => {
         const views = await viewsResponse.json()
         store.update(state => {
           state.selectedDatabase = db
+          state.selectedModel = models && models.length > 0 && models[0]
           state.breadcrumbs = [db.name]
           state.models = models
           state.views = views
           return state
         })
+        /** TODO: DEMO SOLUTION**/
+        if (!models || models.length === 0) {
+          const { open, close } = getContext("simple-modal")
+          open(
+            CreateEditModelModal,
+            {
+              onClosed: close,
+            },
+            { styleContent: { padding: "0" } }
+          )
+        }
+        /** DEMO SOLUTION  END **/
       },
     },
     records: {
@@ -51,6 +72,7 @@ export const getBackendUiStore = () => {
         store.update(state => {
           state.models.push(model)
           state.models = state.models
+          state.selectedModel = model
           return state
         }),
     },
diff --git a/packages/builder/src/components/nav/BackendNav.svelte b/packages/builder/src/components/nav/BackendNav.svelte
index 173e92d98b..9a790ed75d 100644
--- a/packages/builder/src/components/nav/BackendNav.svelte
+++ b/packages/builder/src/components/nav/BackendNav.svelte
@@ -33,18 +33,7 @@
 </script>
 
 <div class="items-root">
-  <div class="hierarchy">
-    <div class="components-list-container">
-      <div class="nav-group-header">
-        <div class="hierarchy-title">Databases</div>
-        <i class="ri-add-line hoverable" on:click={openDatabaseCreator} />
-      </div>
-    </div>
-
-    <div class="hierarchy-items-container">
-      <DatabasesList />
-    </div>
-  </div>
+  <div class="hierarchy" />
   {#if $backendUiStore.selectedDatabase._id}
     <div class="hierarchy">
       <div class="components-list-container">
diff --git a/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte b/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte
index 30988662ea..cc5260e4b1 100644
--- a/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte
+++ b/packages/builder/src/pages/[application]/backend/database/[selectedDatabase]/index.svelte
@@ -40,8 +40,10 @@
     </ActionButton>
   {/if}
 </div>
-{#if $backendUiStore.selectedDatabase._id}
+{#if $backendUiStore.selectedDatabase._id && $backendUiStore.selectedModel.name}
   <ModelDataTable {selectRecord} />
+{:else}
+  <i style="color: var(--grey-dark)">create your first model to start building</i>
 {/if}
 
 <style>