diff --git a/src/app/components/editor/database/database.component.ts b/src/app/components/editor/database/database.component.ts
index 7afbe31..ed0a774 100644
--- a/src/app/components/editor/database/database.component.ts
+++ b/src/app/components/editor/database/database.component.ts
@@ -1,5 +1,4 @@
-import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
-import HostRecord from '../../../structures/HostRecord';
+import {Component, Input, OnInit, ViewChild} from '@angular/core';
 import {ApiService} from '../../../service/api.service';
 import {Observable} from 'rxjs';
 import {AlertController, LoadingController, ModalController} from '@ionic/angular';
@@ -14,18 +13,21 @@ import {DatetimeEditorComponent} from './editors/datetime/datetime-editor.compon
 import {DatetimeRendererComponent} from './renderers/datetime-renderer.component';
 import {CurrencyRendererComponent} from './renderers/currency-renderer.component';
 import {BooleanRendererComponent} from './renderers/boolean-renderer.component';
+import {EditorNodeContract} from '../../nodes/EditorNode.contract';
+import {EditorService} from '../../../service/editor.service';
 
 @Component({
   selector: 'editor-database',
   templateUrl: './database.component.html',
   styleUrls: ['./database.component.scss'],
 })
-export class DatabaseComponent implements OnInit {
-  @Input() hostRecord: HostRecord;
-  @Input() readonly = false;
-  @Output() hostRecordChange = new EventEmitter<HostRecord>();
-  @Output() requestParentSave = new EventEmitter<DatabaseComponent>();
-  @Output() requestParentDelete = new EventEmitter<DatabaseComponent>();
+export class DatabaseComponent extends EditorNodeContract implements OnInit {
+  @Input() nodeId: string;
+  // @Input() hostRecord: HostRecord;
+  // @Input() readonly = false;
+  // @Output() hostRecordChange = new EventEmitter<HostRecord>();
+  // @Output() requestParentSave = new EventEmitter<DatabaseComponent>();
+  // @Output() requestParentDelete = new EventEmitter<DatabaseComponent>();
   @ViewChild('agGridElement') agGridElement: AgGridAngular;
 
   public dbRecord: any;
@@ -33,29 +35,56 @@ export class DatabaseComponent implements OnInit {
   public dirty = false;
   public lastClickRow = -1;
   public dbName = '';
+  protected dbId!: string;
+
+  public get readonly() {
+    return !this.node || !this.editorService.canEdit()
+  }
 
   constructor(
       protected api: ApiService,
       protected modals: ModalController,
       protected alerts: AlertController,
       protected loader: LoadingController,
-  ) { }
+      public readonly editorService: EditorService,
+  ) { super(); }
 
   title = 'app';
   columnDefs = [];
   rowData = [];
 
+  public isDirty(): boolean | Promise<boolean> {
+    return this.dirty;
+  }
+
+  public needsSave(): boolean | Promise<boolean> {
+    return this.dirty;
+  }
+
+  public needsLoad(): boolean | Promise<boolean> {
+    return this.node && this.pendingSetup;
+  }
+
+  public writeChangesToNode(): void | Promise<void> {
+    this.node.Value.Mode = 'database';
+    this.node.Value.Value = this.dbId;
+    this.node.value = this.dbId;
+  }
+
   ngOnInit() {
+    this.editorService.registerNodeEditor(this.nodeId, this).then(() => {
+
+    });
     // this.loader.create({message: 'Loading database...'}).then(loader => {
       // setTimeout(() => {
       //   loader.present().then(() => {
-        this.getInitObservable().subscribe(() => {
-          this.getColumnLoadObservable().subscribe(() => {
-            this.getDataLoadObservable().subscribe(() => {
-              // loader.dismiss();
-            });
-          });
-        });
+      //   this.getInitObservable().subscribe(() => {
+      //     this.getColumnLoadObservable().subscribe(() => {
+      //       this.getDataLoadObservable().subscribe(() => {
+      //         loader.dismiss();
+      //       });
+      //     });
+      //   });
         // });
       // }, 100);
     // });
@@ -75,16 +104,16 @@ export class DatabaseComponent implements OnInit {
       componentProps: {columnSets: this.columnDefs},
     });
 
-    modal.onDidDismiss().then(result => {
-      if ( result.data ) {
-        this.setColumns(result.data).subscribe(() => {
-          const endpoint = `/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/columns`
-          this.api.post(endpoint, {columns: this.columnDefs}).subscribe(res => {
-            this.requestParentSave.emit(this);
-          });
-        });
-      }
-    });
+    // modal.onDidDismiss().then(result => {
+    //   if ( result.data ) {
+    //     this.setColumns(result.data).subscribe(() => {
+    //       const endpoint = `/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/columns`
+    //       this.api.post(endpoint, {columns: this.columnDefs}).subscribe(res => {
+    //         this.requestParentSave.emit(this);
+    //       });
+    //     });
+    //   }
+    // });
 
     await modal.present();
   }
@@ -115,11 +144,9 @@ export class DatabaseComponent implements OnInit {
         {
           text: 'Delete It',
           handler: () => {
-            const newRows = this.rowData.filter((x, i) => {
+            this.rowData = this.rowData.filter((x, i) => {
               return i !== this.lastClickRow;
             });
-
-            this.rowData = newRows;
             this.agGridElement.api.setRowData(this.rowData);
             this.lastClickRow = -1;
             this.dirty = true;
@@ -131,80 +158,82 @@ export class DatabaseComponent implements OnInit {
     await alert.present();
   }
 
-  async onDropDatabase() {
-    if ( this.readonly ) {
-      return;
-    }
-
-    const alert = await this.alerts.create({
-      header: 'Are you sure?',
-      message: `You are about to delete this database and all its entries. This action cannot be undone.`,
-      buttons: [
-        {
-          text: 'Keep It',
-          role: 'cancel',
-        },
-        {
-          text: 'Delete It',
-          handler: async () => {
-            this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/drop/${this.hostRecord.Value.Value}`).subscribe();
-            this.requestParentDelete.emit(this);
-          },
-        },
-      ],
-    });
-
-    await alert.present();
-  }
+  // async onDropDatabase() {
+  //   if ( this.readonly ) {
+  //     return;
+  //   }
+  //
+  //   const alert = await this.alerts.create({
+  //     header: 'Are you sure?',
+  //     message: `You are about to delete this database and all its entries. This action cannot be undone.`,
+  //     buttons: [
+  //       {
+  //         text: 'Keep It',
+  //         role: 'cancel',
+  //       },
+  //       {
+  //         text: 'Delete It',
+  //         handler: async () => {
+  //           this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/drop/${this.hostRecord.Value.Value}`).subscribe();
+  //           this.requestParentDelete.emit(this);
+  //         },
+  //       },
+  //     ],
+  //   });
+  //
+  //   await alert.present();
+  // }
 
   onRowClicked($event) {
     this.lastClickRow = $event.rowIndex;
   }
 
-  getDataLoadObservable(): Observable<any> {
-    return new Observable<any>(sub => {
-      this.api.get(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}/data`).subscribe(res => {
-        this.rowData = res.data.map(x => x.RowData);
-        this.agGridElement.api.setRowData(this.rowData);
-        sub.next();
-        sub.complete();
-      });
-    });
-  }
 
-  onSyncRecords() {
-    if ( this.readonly ) {
-      return;
-    }
-
-    this.loader.create({message: 'Syncing the database...'}).then(loader => {
-      loader.present().then(() => {
-        this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/data`, this.rowData)
-            .subscribe(res => {
-          this.rowData = res.data.map(x => x.RowData);
-          this.agGridElement.api.setRowData(this.rowData);
-
-          this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/name`,
-              { Name: this.dbName })
-              .subscribe(resp => {
-                this.dirty = false;
-                loader.dismiss();
-              });
-        });
-      });
-    });
-  }
 
-  getColumnLoadObservable(): Observable<any> {
-    return new Observable<any>(sub => {
-      this.api.get(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}/columns`).subscribe(res => {
-        this.setColumns(res.data).subscribe(() => {
-          sub.next();
-          sub.complete();
-        });
-      });
-    });
-  }
+  // getDataLoadObservable(): Observable<any> {
+  //   return new Observable<any>(sub => {
+  //     this.api.get(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}/data`).subscribe(res => {
+  //       this.rowData = res.data.map(x => x.RowData);
+  //       this.agGridElement.api.setRowData(this.rowData);
+  //       sub.next();
+  //       sub.complete();
+  //     });
+  //   });
+  // }
+  //
+  // onSyncRecords() {
+  //   if ( this.readonly ) {
+  //     return;
+  //   }
+  //
+  //   this.loader.create({message: 'Syncing the database...'}).then(loader => {
+  //     loader.present().then(() => {
+  //       this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/data`, this.rowData)
+  //           .subscribe(res => {
+  //         this.rowData = res.data.map(x => x.RowData);
+  //         this.agGridElement.api.setRowData(this.rowData);
+  //
+  //         this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/set/${this.hostRecord.Value.Value}/name`,
+  //             { Name: this.dbName })
+  //             .subscribe(resp => {
+  //               this.dirty = false;
+  //               loader.dismiss();
+  //             });
+  //       });
+  //     });
+  //   });
+  // }
+  //
+  // getColumnLoadObservable(): Observable<any> {
+  //   return new Observable<any>(sub => {
+  //     this.api.get(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}/columns`).subscribe(res => {
+  //       this.setColumns(res.data).subscribe(() => {
+  //         sub.next();
+  //         sub.complete();
+  //       });
+  //     });
+  //   });
+  // }
 
   setColumns(data): Observable<any> {
     return new Observable<any>(sub => {
@@ -246,37 +275,38 @@ export class DatabaseComponent implements OnInit {
     });
   }
 
-  getInitObservable(): Observable<any> {
-    return new Observable<any>(sub => {
-      if ( this.hostRecord.UUID && this.pendingSetup ) {
-        if ( !this.hostRecord.Value ) {
-          this.hostRecord.Value = {};
-        }
-        if ( !this.hostRecord.Value.Value && !this.readonly ) {
-          this.api.post(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/create`).subscribe(res => {
-            this.dbRecord = res.data;
-            this.dbName = res.data.Name;
-            this.hostRecord.Value.Mode = 'database';
-            this.hostRecord.Value.Value = res.data.UUID;
-            this.hostRecord.value = res.data.UUID;
-            this.hostRecordChange.emit(this.hostRecord);
-            this.pendingSetup = false;
-            sub.next(true);
-            sub.complete();
-          });
-        } else {
-          this.api.get(`/db/${this.hostRecord.PageId}/${this.hostRecord.UUID}/get/${this.hostRecord.Value.Value}`).subscribe(res => {
-            this.dbRecord = res.data;
-            this.dbName = res.data.Name;
+  public performLoad(): void | Promise<void> {
+    return new Promise((res, rej) => {
+      if ( !this.node.Value ) {
+        this.node.Value = {};
+      }
+
+      console.log('loading db');
+
+      if ( !this.node.Value.Value && this.editorService.canEdit() ) {
+        this.api.post(`/db/${this.page.UUID}/${this.node.UUID}/create`).subscribe({
+          next: result => {
+            this.dbRecord = result.data;
+            this.dbName = result.data.Name;
+            this.node.Value.Mode = 'database';
+            this.node.Value.Value = result.data.UUID;
+            this.node.value = result.data.UUID;
             this.pendingSetup = false;
-            sub.next(true);
-            sub.complete();
-          });
-        }
+            res();
+          },
+          error: rej,
+        });
       } else {
-        this.pendingSetup = true;
+        this.api.get(`/db/${this.page.UUID}/${this.node.UUID}/get/${this.node.Value.Value}`).subscribe({
+          next: result => {
+            this.dbRecord = result.data;
+            this.dbName = result.data.Name;
+            this.pendingSetup = false;
+            res();
+          },
+          error: rej,
+        });
       }
     });
   }
-
 }
diff --git a/src/app/pages/editor/editor.page.html b/src/app/pages/editor/editor.page.html
index a1e247c..e1d83b5 100644
--- a/src/app/pages/editor/editor.page.html
+++ b/src/app/pages/editor/editor.page.html
@@ -31,6 +31,9 @@
           <ng-container *ngIf="node.isNorm()">
             <editor-norm style="flex: 1;" [nodeId]="node.UUID"></editor-norm>
           </ng-container>
+          <ng-container *ngIf="node.type === 'database_ref'">
+            <editor-database style="flex: 1;" [nodeId]="node.UUID"></editor-database>
+          </ng-container>
           <ng-container *ngIf="node.type === 'code_ref'">
             <editor-code style="flex: 1;" [nodeId]="node.UUID"></editor-code>
           </ng-container>
diff --git a/src/app/pages/editor/editor.page.scss b/src/app/pages/editor/editor.page.scss
index 9fdfd91..74b1270 100644
--- a/src/app/pages/editor/editor.page.scss
+++ b/src/app/pages/editor/editor.page.scss
@@ -25,7 +25,7 @@ ion-icon.invisible {
     color: var(--noded-background-code);
   }
 
-  &.db {
+  &.database_ref {
     color: var(--noded-background-db);
   }
 }
diff --git a/src/app/pages/editor/editor.page.ts b/src/app/pages/editor/editor.page.ts
index 3ae19a9..06a7c1d 100644
--- a/src/app/pages/editor/editor.page.ts
+++ b/src/app/pages/editor/editor.page.ts
@@ -23,6 +23,7 @@ export class EditorPage implements OnInit {
     norm: 'fa fa-quote-left',
     page: 'fa fa-sticky-note',
     db: 'fa fa-database',
+    database_ref: 'fa fa-database',
     code: 'fa fa-code',
     code_ref: 'fa fa-code',
   };