diff --git a/packages/datalib/src/PerspectiveConfig.ts b/packages/datalib/src/PerspectiveConfig.ts
index f3b3d2091..e117cf94b 100644
--- a/packages/datalib/src/PerspectiveConfig.ts
+++ b/packages/datalib/src/PerspectiveConfig.ts
@@ -154,3 +154,13 @@ export interface MultipleDatabaseInfo {
     [database: string]: DatabaseInfo;
   };
 }
+
+export function switchPerspectiveReferenceDirection(ref: PerspectiveReferenceConfig): PerspectiveReferenceConfig {
+  return {
+    designerId: ref.designerId,
+    sourceId: ref.targetId,
+    targetId: ref.sourceId,
+    isAutoGenerated: ref.isAutoGenerated,
+    columns: ref.columns.map(x => ({ source: x.target, target: x.source })),
+  };
+}
diff --git a/packages/web/src/designer/Designer.svelte b/packages/web/src/designer/Designer.svelte
index af025442c..cc4dad1da 100644
--- a/packages/web/src/designer/Designer.svelte
+++ b/packages/web/src/designer/Designer.svelte
@@ -662,7 +662,9 @@
       );
     }
 
-    for (const reference of value?.references) {
+    for (const reference of settings?.sortAutoLayoutReferences
+      ? settings?.sortAutoLayoutReferences(value?.references)
+      : value?.references) {
       graph.addEdge(reference.sourceId, reference.targetId);
     }
 
diff --git a/packages/web/src/designer/QueryDesignerReference.svelte b/packages/web/src/designer/QueryDesignerReference.svelte
index 0fc4239ba..6eb3281bb 100644
--- a/packages/web/src/designer/QueryDesignerReference.svelte
+++ b/packages/web/src/designer/QueryDesignerReference.svelte
@@ -16,8 +16,11 @@
   let minpos;
   let columnsY = [];
 
-  const buswi = 10;
-  const extwi = 25;
+  const BUSWI = 10;
+  const EXTWI = 25;
+
+  $: buswi = settings?.referencePaintSettings?.buswi || BUSWI;
+  $: extwi = settings?.referencePaintSettings?.extwi || EXTWI;
 
   export function recomputePosition() {
     const { designerId, sourceId, targetId, columns, joinType } = reference;
diff --git a/packages/web/src/perspectives/PerspectiveDesigner.svelte b/packages/web/src/perspectives/PerspectiveDesigner.svelte
index a6352a0c2..bdc126077 100644
--- a/packages/web/src/perspectives/PerspectiveDesigner.svelte
+++ b/packages/web/src/perspectives/PerspectiveDesigner.svelte
@@ -5,8 +5,9 @@
     PerspectiveConfig,
     perspectiveNodesHaveStructure,
     PerspectiveTreeNode,
+    switchPerspectiveReferenceDirection,
   } from 'dbgate-datalib';
-  import _, { findIndex } from 'lodash';
+  import _ from 'lodash';
   import { tick } from 'svelte';
   import runCommand from '../commands/runCommand';
 
@@ -109,14 +110,21 @@
     });
   }
 
-  async function detectAutoArrange(config: PerspectiveConfig, dbInfos) {
-    if (config.nodes.find(x => !x.position) && perspectiveNodesHaveStructure(config, dbInfos, conid, database)) {
+  async function detectAutoArrange(config: PerspectiveConfig, dbInfos, root) {
+    if (
+      root &&
+      config.nodes.find(x => !x.position) &&
+      perspectiveNodesHaveStructure(config, dbInfos, conid, database) &&
+      config.nodes.every(x => root.findNodeByDesignerId(x.designerId))
+    ) {
       await tick();
       runCommand('designer.arrange');
     }
   }
 
-  $: detectAutoArrange(config, dbInfos);
+  $: detectAutoArrange(config, dbInfos, root);
+
+  // $: console.log('DESIGNER ROOT', root);
 </script>
 
 <Designer
@@ -210,6 +218,21 @@
       if (level <= 9) return `icon num-${level}-outline`;
       return 'icon num-9-plus';
     },
+    sortAutoLayoutReferences: references => {
+      // console.log('sortAutoLayoutReferences', root, references.length);
+      return _.sortBy(references, reference => {
+        const node1 = root?.findNodeByDesignerId(reference.sourceId);
+        const node2 = root?.findNodeByDesignerId(reference.targetId);
+        if (!node1 || !node2) return 10000;
+        if (node1.level > node2.level) reference = switchPerspectiveReferenceDirection(reference);
+        const index = _.findIndex(node1.childNodes, x => x.columnName == reference.columns[0].source);
+        return index;
+      });
+    },
+    referencePaintSettings: {
+      buswi: 10,
+      extwi: 10,
+    },
   }}
   referenceComponent={QueryDesignerReference}
   value={createDesignerModel(config, dbInfos)}
diff --git a/packages/web/src/perspectives/PerspectiveView.svelte b/packages/web/src/perspectives/PerspectiveView.svelte
index 18b477cb9..6349bad58 100644
--- a/packages/web/src/perspectives/PerspectiveView.svelte
+++ b/packages/web/src/perspectives/PerspectiveView.svelte
@@ -157,6 +157,7 @@
   }
 
   // $: console.log('PERSPECTIVE', config);
+  // $: console.log('VIEW ROOT', root);
 </script>
 
 <HorizontalSplitter initialValue={getInitialManagerSize()} bind:size={managerSize}>