diff --git a/packages/datalib/src/PerspectiveConfig.ts b/packages/datalib/src/PerspectiveConfig.ts
index a5f812e1..ef1eb461 100644
--- a/packages/datalib/src/PerspectiveConfig.ts
+++ b/packages/datalib/src/PerspectiveConfig.ts
@@ -8,9 +8,10 @@ import uuidv1 from 'uuid/v1';
 // }
 
 export interface PerspectiveCustomJoinConfig {
-  joinid: string;
+  refNodeDesignerId: string;
+  referenceDesignerId: string;
   joinName: string;
-  baseUniqueName: string;
+  baseDesignerId: string;
   conid?: string;
   database?: string;
   refSchemaName?: string;
@@ -50,6 +51,8 @@ export interface PerspectiveNodeConfig {
   schemaName?: string;
   pureName: string;
 
+  alias?: string;
+
   conid?: string;
   database?: string;
 
diff --git a/packages/datalib/src/PerspectiveTreeNode.ts b/packages/datalib/src/PerspectiveTreeNode.ts
index c0c6dea9..433c07a0 100644
--- a/packages/datalib/src/PerspectiveTreeNode.ts
+++ b/packages/datalib/src/PerspectiveTreeNode.ts
@@ -952,13 +952,21 @@ export class PerspectiveCustomJoinTreeNode extends PerspectiveTableNode {
   }
 
   get codeName() {
-    return this.customJoin.joinid;
+    return this.customJoin.refNodeDesignerId;
   }
 
   get customJoinConfig(): PerspectiveCustomJoinConfig {
     return this.customJoin;
   }
 
+  get isChecked() {
+    return this.isCheckedNode;
+  }
+
+  toggleChecked(value?: boolean) {
+    this.toggleCheckedNode(value);
+  }
+
   getParentJoinCondition(alias: string, parentAlias: string): Condition[] {
     return this.customJoin.columns.map(column => {
       const res: Condition = {
@@ -1032,15 +1040,15 @@ export function getTableChildPerspectiveNodes(
   setConfig: ChangePerspectiveConfigFunc,
   dataProvider: PerspectiveDataProvider,
   databaseConfig: PerspectiveDatabaseConfig,
-  parentColumn: PerspectiveTreeNode
+  parentNode: PerspectiveTreeNode
 ) {
   if (!table) return [];
-  const db = parentColumn.db;
+  const db = parentNode.db;
 
   const columnNodes = table.columns.map(col =>
     findDesignerIdForNode(
       config,
-      parentColumn,
+      parentNode,
       designerId =>
         new PerspectiveTableColumnNode(
           col,
@@ -1050,7 +1058,7 @@ export function getTableChildPerspectiveNodes(
           setConfig,
           dataProvider,
           databaseConfig,
-          parentColumn,
+          parentNode,
           designerId
         )
     )
@@ -1074,7 +1082,7 @@ export function getTableChildPerspectiveNodes(
         dependencies.push(
           findDesignerIdForNode(
             config,
-            parentColumn,
+            parentNode,
             designerId =>
               new PerspectiveTableReferenceNode(
                 fk,
@@ -1085,7 +1093,7 @@ export function getTableChildPerspectiveNodes(
                 dataProvider,
                 databaseConfig,
                 isMultiple,
-                parentColumn,
+                parentNode,
                 designerId
               )
           )
@@ -1095,6 +1103,60 @@ export function getTableChildPerspectiveNodes(
   }
   res.push(..._sortBy(dependencies, 'title'));
 
+  const customs = [];
+  for (const node of config.nodes) {
+    if (node.designerId == parentNode.parentNode?.designerId || res.find(x => x.designerId == node.designerId)) {
+      // already used as FK
+      continue;
+    }
+    for (const ref of config.references) {
+      if (
+        (ref.sourceId == parentNode.designerId && ref.targetId == node.designerId) ||
+        (ref.targetId == parentNode.designerId && ref.sourceId == node.designerId)
+      ) {
+        const newConfig = { ...databaseConfig };
+        if (node.conid) newConfig.conid = node.conid;
+        if (node.database) newConfig.database = node.database;
+        const db = dbs?.[newConfig.conid]?.[newConfig.database];
+        const table = db?.tables?.find(x => x.pureName == node.pureName && x.schemaName == node.schemaName);
+        const view = db?.views?.find(x => x.pureName == node.pureName && x.schemaName == node.schemaName);
+
+        const join: PerspectiveCustomJoinConfig = {
+          refNodeDesignerId: node.designerId,
+          referenceDesignerId: ref.designerId,
+          baseDesignerId: parentNode.designerId,
+          joinName: node.alias || node.pureName,
+          refTableName: node.pureName,
+          refSchemaName: node.schemaName,
+          conid: node.conid,
+          database: node.database,
+          columns:
+            ref.sourceId == parentNode.designerId
+              ? ref.columns.map(col => ({ baseColumnName: col.source, refColumnName: col.target }))
+              : ref.columns.map(col => ({ baseColumnName: col.target, refColumnName: col.source })),
+        };
+
+        if (table || view) {
+          customs.push(
+            new PerspectiveCustomJoinTreeNode(
+              join,
+              table || view,
+              dbs,
+              config,
+              setConfig,
+              dataProvider,
+              newConfig,
+              parentNode,
+              node.designerId
+            )
+          );
+        }
+      }
+    }
+  }
+
+  res.push(..._sortBy(customs, 'title'));
+
   // const customs = [];
   // for (const join of config.customJoins || []) {
   //   if (join.baseUniqueName == parentColumn.uniqueName) {
diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte
index 005f8578..af025442 100644
--- a/packages/web/src/designer/Designer.svelte
+++ b/packages/web/src/designer/Designer.svelte
@@ -219,14 +219,18 @@
       }));
       updateFromDbInfo();
     } else {
-      callChange(current => ({
-        ...current,
-        tables: (current.tables || []).filter(x => x.designerId != table.designerId),
-        references: (current.references || []).filter(
-          x => x.sourceId != table.designerId && x.targetId != table.designerId
-        ),
-        columns: (current.columns || []).filter(x => x.designerId != table.designerId),
-      }));
+      callChange(
+        current => ({
+          ...current,
+          tables: (current.tables || []).filter(x => x.designerId != table.designerId),
+          references: (current.references || []).filter(
+            x => x.sourceId != table.designerId && x.targetId != table.designerId
+          ),
+          columns: (current.columns || []).filter(x => x.designerId != table.designerId),
+        }),
+        undefined,
+        { removeTables: true }
+      );
     }
   };
 
diff --git a/packages/web/src/perspectives/CustomJoinModal.svelte b/packages/web/src/perspectives/CustomJoinModal.svelte
index 189ca357..ea16ea12 100644
--- a/packages/web/src/perspectives/CustomJoinModal.svelte
+++ b/packages/web/src/perspectives/CustomJoinModal.svelte
@@ -18,6 +18,7 @@
   import { onMount, tick } from 'svelte';
   import {
     ChangePerspectiveConfigFunc,
+    createPerspectiveNodeConfig,
     PerspectiveConfig,
     PerspectiveCustomJoinConfig,
     PerspectiveTreeNode,
@@ -35,7 +36,6 @@
 
   let conidOverride = editValue?.conid || null;
   let databaseOverride = editValue?.database || null;
-  let joinid = editValue?.joinid || uuidv1();
 
   // $: fromDbInfo = useDatabaseInfo({
   //   conid,
@@ -68,19 +68,19 @@
   let columns = editValue?.columns || [];
   //   let fromTableName = pureName;
   //   let fromSchemaName = schemaName;
-  let fromUniuqeName = editValue?.baseUniqueName || root.uniqueName;
+  let fromDesignerId = editValue?.baseDesignerId || root.designerId;
   let refTableName = editValue?.refTableName || null;
   let refSchemaName = editValue?.refSchemaName || null;
   let joinName = editValue?.joinName || '';
 
-  onMount(() => {
-    if (editValue) return;
-    let index = 1;
-    while (config.customJoins?.find(x => x.joinName == `Custom join ${index}`)) {
-      index += 1;
-    }
-    joinName = `Custom join ${index}`;
-  });
+  // onMount(() => {
+  //   if (editValue) return;
+  //   let index = 1;
+  //   while (config.customJoins?.find(x => x.joinName == `Custom join ${index}`)) {
+  //     index += 1;
+  //   }
+  //   joinName = `Custom join ${index}`;
+  // });
 
   //   $: fromTableList = [
   //     ..._.sortBy($fromDbInfo?.tables || [], ['schemaName', 'pureName']),
@@ -124,7 +124,7 @@
   ];
 
   $: fromTableList = root.getBaseTables();
-  $: fromTableInfo = fromTableList?.find(x => x.node.uniqueName == fromUniuqeName)?.table;
+  $: fromTableInfo = fromTableList?.find(x => x.node.designerId == fromDesignerId)?.table;
 
   $: (async () => {
     // without this has svelte problem, doesn't invalidate SelectField options
@@ -134,7 +134,7 @@
 
     fromTableOptions = fromTableList.map(tbl => ({
       label: fullNameToLabel(tbl.table),
-      value: tbl.node.uniqueName,
+      value: tbl.node.designerId,
     }));
 
     refTableOptions = refTableList.map(tbl => ({
@@ -173,13 +173,13 @@
         <div class="label col-3">Base table</div>
         <div class="col-9">
           <SelectField
-            value={fromUniuqeName}
+            value={fromDesignerId}
             isNative
             notSelected
             options={fromTableOptions}
             on:change={e => {
               if (e.detail) {
-                fromUniuqeName = e.detail;
+                fromDesignerId = e.detail;
               }
             }}
           />
@@ -321,23 +321,48 @@
     <svelte:fragment slot="footer">
       <FormSubmit
         value={'Save'}
-        on:click={async () => {
-          const newJoin = {
-            joinid,
-            joinName,
-            baseUniqueName: fromUniuqeName,
-            refTableName,
-            refSchemaName,
-            columns,
-            conid: conidOverride,
-            database: databaseOverride,
-          };
-          setConfig(cfg => ({
-            ...cfg,
-            customJoins: editValue
-              ? cfg.customJoins.map(x => (x.joinid == editValue.joinid ? newJoin : x))
-              : [...(cfg.customJoins || []), newJoin],
-          }));
+        on:click={() => {
+          setConfig(cfg => {
+            const newNode = createPerspectiveNodeConfig({ pureName: refTableName, schemaName: refSchemaName });
+            newNode.designerId = editValue?.refNodeDesignerId || uuidv1();
+            newNode.conid = conidOverride;
+            newNode.database = databaseOverride;
+            newNode.position = cfg.nodes.find(x => x.designerId == editValue?.refNodeDesignerId)?.position;
+            newNode.alias = joinName || refTableName;
+
+            const newRef = {
+              designerId: editValue?.referenceDesignerId || uuidv1(),
+              sourceId: fromDesignerId,
+              targetId: newNode.designerId,
+              columns: columns.map(col => ({
+                source: col.baseColumnName,
+                target: col.refColumnName,
+              })),
+            };
+
+            return {
+              ...cfg,
+              nodes: [...cfg.nodes.filter(x => x.designerId != editValue?.refNodeDesignerId), newNode],
+              references: [...cfg.references.filter(x => x.designerId != editValue?.referenceDesignerId), newRef],
+            };
+          });
+
+          // const newJoin = {
+          //   joinid,
+          //   joinName,
+          //   baseDesignerId: fromDesignerId,
+          //   refTableName,
+          //   refSchemaName,
+          //   columns,
+          //   conid: conidOverride,
+          //   database: databaseOverride,
+          // };
+          // setConfig(cfg => ({
+          //   ...cfg,
+          //   customJoins: editValue
+          //     ? cfg.customJoins.map(x => (x.joinid == editValue.joinid ? newJoin : x))
+          //     : [...(cfg.customJoins || []), newJoin],
+          // }));
           closeCurrentModal();
         }}
       />
diff --git a/packages/web/src/perspectives/PerspectiveDesigner.svelte b/packages/web/src/perspectives/PerspectiveDesigner.svelte
index ae023b66..dc739631 100644
--- a/packages/web/src/perspectives/PerspectiveDesigner.svelte
+++ b/packages/web/src/perspectives/PerspectiveDesigner.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { MultipleDatabaseInfo, PerspectiveConfig } from 'dbgate-datalib';
+  import { createPerspectiveNodeConfig, MultipleDatabaseInfo, PerspectiveConfig } from 'dbgate-datalib';
   import _ from 'lodash';
   import { tick } from 'svelte';
   import runCommand from '../commands/runCommand';
@@ -46,21 +46,43 @@
       }
       const res = {
         ...oldValue,
-        nodes: oldValue.nodes.map(node => {
-          const table = newValue.tables?.find(x => x.designerId == node.designerId);
-          if (table && (table.left != node.position?.x || table.top != node.position?.y)) {
-            if (!settings?.isCalledFromArrange) {
-              isArranged = false;
+        references: newValue.references,
+        nodes: _.compact(
+          oldValue.nodes.map(node => {
+            const table = newValue.tables?.find(x => x.designerId == node.designerId);
+
+            if (!table && settings?.removeTables) {
+              return null;
             }
-            return {
+
+            const nodeChanged = {
               ...node,
-              position: { x: table.left, y: table.top },
+              alias: table?.alias,
             };
-          }
-          return node;
-        }),
+            if (table && (table.left != node.position?.x || table.top != node.position?.y)) {
+              if (!settings?.isCalledFromArrange) {
+                isArranged = false;
+              }
+              nodeChanged.position = { x: table.left, y: table.top };
+            }
+            return nodeChanged;
+          })
+        ),
       };
+
+      for (const table of newValue.tables) {
+        if (res.nodes.find(x => x.designerId == table.designerId)) {
+          continue;
+        }
+        const newNode = createPerspectiveNodeConfig(table);
+        newNode.designerId = table.designerId;
+        newNode.position = { x: table.left, y: table.top };
+        isArranged = false;
+        res.nodes.push(newNode);
+      }
+
       res.isArranged = isArranged;
+
       return res;
     });
   }
@@ -81,10 +103,10 @@
     showTableCloseButton: true,
     allowColumnOperations: true,
     allowCreateRefByDrag: true,
-    allowTableAlias: true,
     allowScrollColumns: true,
     canSelectColumns: true,
     canCheckTables: true,
+    allowTableAlias: true,
     arrangeAlg: 'tree',
     referenceMenu: ({ designer, reference, onChangeReference, onRemoveReference }) => {
       return [{ text: 'Remove', onClick: () => onRemoveReference(reference) }];
diff --git a/packages/web/src/perspectives/perspectiveMenu.ts b/packages/web/src/perspectives/perspectiveMenu.ts
index c5f2a0d1..34add8b0 100644
--- a/packages/web/src/perspectives/perspectiveMenu.ts
+++ b/packages/web/src/perspectives/perspectiveMenu.ts
@@ -89,7 +89,8 @@ export function getPerspectiveNodeMenu(props: PerspectiveNodeMenuProps) {
       onClick: () =>
         setConfig(cfg => ({
           ...cfg,
-          customJoins: (cfg.customJoins || []).filter(x => x.joinid != customJoin.joinid),
+          nodes: (cfg.nodes || []).filter(x => x.designerId != customJoin.refNodeDesignerId),
+          references: (cfg.references || []).filter(x => x.designerId != customJoin.referenceDesignerId),
         })),
     },
     customJoin && {