diff --git a/packages/builder/src/nav/DatabasesList.svelte b/packages/builder/src/nav/DatabasesList.svelte
index b531d34351..ba40b8c1b4 100644
--- a/packages/builder/src/nav/DatabasesList.svelte
+++ b/packages/builder/src/nav/DatabasesList.svelte
@@ -1,6 +1,7 @@
 <script>
   import { tick } from "svelte"
   import { store, backendUiStore } from "../builderStore"
+  import api from "../builderStore/api"
   import getIcon from "../common/icon"
   import { CheckIcon } from "../common/Icons"
 
@@ -13,6 +14,17 @@
     backendUiStore.actions.views.select(views[0])
     backendUiStore.actions.database.select(database)
   }
+
+  async function deleteDatabase(database) {
+    const DELETE_DATABASE_URL = `/_builder/instance/_master/0/api/record/applications/${$store.appId}/instances/${database.id}`
+    const response = await api.delete(DELETE_DATABASE_URL)
+    store.update(state => {
+      state.appInstances = state.appInstances.filter(
+        db => db.id !== database.id
+      )
+      return state
+    })
+  }
 </script>
 
 <div class="root">
@@ -24,12 +36,15 @@
             <CheckIcon />
           {/if}
         </span>
-
+        <i
+          class="ri-delete-bin-7-line hoverable uk-margin-small-left"
+          on:click={() => deleteDatabase(database)} />
         <button
           class:active={database.id === $backendUiStore.selectedDatabase.id}
           on:click={() => selectDatabase(database)}>
           {database.name}
         </button>
+
       </li>
     {/each}
   </ul>
@@ -53,6 +68,8 @@
 
   li {
     margin: 0.5rem 0;
+    display: flex;
+    align-items: center;
   }
 
   button {