diff --git a/packages/web/src/designer/Designer.js b/packages/web/src/designer/Designer.js
index b345ed28d..4622dc94f 100644
--- a/packages/web/src/designer/Designer.js
+++ b/packages/web/src/designer/Designer.js
@@ -6,6 +6,7 @@ import _ from 'lodash';
 import useTheme from '../theme/useTheme';
 import DesignerReference from './DesignerReference';
 import cleanupDesignColumns from './cleanupDesignColumns';
+import { isConnectedByReference } from './generateDesignedQuery';
 
 const Wrapper = styled.div`
   flex: 1;
@@ -130,7 +131,7 @@ export default function Designer({ value, onChange }) {
                 designerId: uuidv1(),
                 sourceId: source.designerId,
                 targetId: target.designerId,
-                joinType: 'INNER JOIN',
+                joinType: isConnectedByReference(current, source, target, null) ? 'CROSS JOIN' : 'INNER JOIN',
                 columns: [
                   {
                     source: source.columnName,
@@ -172,6 +173,7 @@ export default function Designer({ value, onChange }) {
             reference={ref}
             onChangeReference={changeReference}
             onRemoveReference={removeReference}
+            designer={value}
           />
         ))}
         {(tables || []).map((table) => (
diff --git a/packages/web/src/designer/DesignerReference.js b/packages/web/src/designer/DesignerReference.js
index a02ab63d9..fb4d5d135 100644
--- a/packages/web/src/designer/DesignerReference.js
+++ b/packages/web/src/designer/DesignerReference.js
@@ -5,6 +5,7 @@ import _ from 'lodash';
 import useTheme from '../theme/useTheme';
 import { useShowMenu } from '../modals/showMenu';
 import { DropDownMenuDivider, DropDownMenuItem } from '../modals/DropDownMenu';
+import { isConnectedByReference } from './generateDesignedQuery';
 
 const StyledSvg = styled.svg`
   position: absolute;
@@ -37,18 +38,22 @@ const ReferenceText = styled.span`
   background-color: ${(props) => props.theme.designer_background};
 `;
 
-function ReferenceContextMenu({ remove, setJoinType }) {
+function ReferenceContextMenu({ remove, setJoinType, isConnected }) {
   return (
     <>
       <DropDownMenuItem onClick={remove}>Remove</DropDownMenuItem>
-      <DropDownMenuDivider />
-      <DropDownMenuItem onClick={() => setJoinType('INNER JOIN')}>Set INNER JOIN</DropDownMenuItem>
-      <DropDownMenuItem onClick={() => setJoinType('LEFT JOIN')}>Set LEFT JOIN</DropDownMenuItem>
-      <DropDownMenuItem onClick={() => setJoinType('RIGHT JOIN')}>Set RIGHT JOIN</DropDownMenuItem>
-      <DropDownMenuItem onClick={() => setJoinType('FULL OUTER JOIN')}>Set FULL OUTER JOIN</DropDownMenuItem>
-      <DropDownMenuItem onClick={() => setJoinType('CROSS JOIN')}>Set CROSS JOIN</DropDownMenuItem>
-      <DropDownMenuItem onClick={() => setJoinType('WHERE EXISTS')}>Set WHERE EXISTS</DropDownMenuItem>
-      <DropDownMenuItem onClick={() => setJoinType('WHERE NOT EXISTS')}>Set WHERE NOT EXISTS</DropDownMenuItem>
+      {!isConnected && (
+        <>
+          <DropDownMenuDivider />
+          <DropDownMenuItem onClick={() => setJoinType('INNER JOIN')}>Set INNER JOIN</DropDownMenuItem>
+          <DropDownMenuItem onClick={() => setJoinType('LEFT JOIN')}>Set LEFT JOIN</DropDownMenuItem>
+          <DropDownMenuItem onClick={() => setJoinType('RIGHT JOIN')}>Set RIGHT JOIN</DropDownMenuItem>
+          <DropDownMenuItem onClick={() => setJoinType('FULL OUTER JOIN')}>Set FULL OUTER JOIN</DropDownMenuItem>
+          <DropDownMenuItem onClick={() => setJoinType('CROSS JOIN')}>Set CROSS JOIN</DropDownMenuItem>
+          <DropDownMenuItem onClick={() => setJoinType('WHERE EXISTS')}>Set WHERE EXISTS</DropDownMenuItem>
+          <DropDownMenuItem onClick={() => setJoinType('WHERE NOT EXISTS')}>Set WHERE NOT EXISTS</DropDownMenuItem>
+        </>
+      )}
     </>
   );
 }
@@ -59,6 +64,7 @@ export default function DesignerReference({
   changeToken,
   onRemoveReference,
   onChangeReference,
+  designer,
 }) {
   const { designerId, sourceId, targetId, columns, joinType } = reference;
   const theme = useTheme();
@@ -104,6 +110,7 @@ export default function DesignerReference({
       event.pageY,
       <ReferenceContextMenu
         remove={() => onRemoveReference({ designerId })}
+        isConnected={isConnectedByReference(designer, { designerId: sourceId }, { designerId: targetId }, reference)}
         setJoinType={(joinType) => {
           onChangeReference({
             ...reference,
diff --git a/packages/web/src/designer/generateDesignedQuery.ts b/packages/web/src/designer/generateDesignedQuery.ts
index c95aa5862..3f03ffd5f 100644
--- a/packages/web/src/designer/generateDesignedQuery.ts
+++ b/packages/web/src/designer/generateDesignedQuery.ts
@@ -26,6 +26,9 @@ class DesignerComponent {
   get parentTables() {
     return this.parentComponent ? this.parentComponent.myAndParentTables : [];
   }
+  get thisAndSubComponentsTables() {
+    return [...this.tables, ..._.flatten(this.subComponents.map((x) => x.thisAndSubComponentsTables))];
+  }
 }
 
 function referenceIsConnecting(
@@ -221,7 +224,6 @@ function findPrimaryTable(tables: DesignerTableInfo[]) {
   return _.minBy(tables, (x) => x.top);
 }
 
-
 function getReferenceConditions(reference: DesignerReferenceInfo, designer: DesignerInfo): Condition[] {
   const sourceTable = designer.tables.find((x) => x.designerId == reference.sourceId);
   const targetTable = designer.tables.find((x) => x.designerId == reference.targetId);
@@ -260,3 +262,21 @@ export default function generateDesignedQuery(designer: DesignerInfo, engine: En
   dumpSqlSelect(dmp, select);
   return dmp.s;
 }
+
+export function isConnectedByReference(
+  designer: DesignerInfo,
+  table1: { designerId: string },
+  table2: { designerId: string },
+  withoutRef: { designerId: string }
+) {
+  const creator = new DesignerComponentCreator({
+    ...designer,
+    references: withoutRef
+      ? designer.references.filter((x) => x.designerId != withoutRef.designerId)
+      : designer.references,
+  });
+  const arrays = creator.components.map((x) => x.thisAndSubComponentsTables);
+  const array1 = arrays.find((a) => a.find((x) => x.designerId == table1.designerId));
+  const array2 = arrays.find((a) => a.find((x) => x.designerId == table2.designerId));
+  return array1 == array2;
+}