diff --git a/packages/tools/src/schemaEditorTools.ts b/packages/tools/src/schemaEditorTools.ts
index 51d020634..3e707a138 100644
--- a/packages/tools/src/schemaEditorTools.ts
+++ b/packages/tools/src/schemaEditorTools.ts
@@ -1,6 +1,6 @@
 import uuidv1 from 'uuid/v1';
 import _omit from 'lodash/omit';
-import { ColumnInfo, ConstraintInfo, PrimaryKeyInfo, TableInfo } from 'dbgate-types';
+import { ColumnInfo, ConstraintInfo, ForeignKeyInfo, PrimaryKeyInfo, TableInfo } from 'dbgate-types';
 
 export interface EditorColumnInfo extends ColumnInfo {
   isPrimaryKey?: boolean;
@@ -107,6 +107,16 @@ export function editorAddConstraint(table: TableInfo, constraint: ConstraintInfo
     } as PrimaryKeyInfo;
   }
 
+  if (constraint.constraintType == 'foreignKey') {
+    res.foreignKeys = [
+      ...(res.foreignKeys || []),
+      {
+        pairingId: uuidv1(),
+        ...constraint,
+      } as ForeignKeyInfo,
+    ];
+  }
+
   return res;
 }
 
@@ -122,6 +132,12 @@ export function editorModifyConstraint(table: TableInfo, constraint: ConstraintI
     };
   }
 
+  if (constraint.constraintType == 'foreignKey') {
+    res.foreignKeys = table.foreignKeys.map(fk =>
+      fk.pairingId == constraint.pairingId ? { ...fk, ...constraint } : fk
+    );
+  }
+
   return res;
 }
 
@@ -134,5 +150,9 @@ export function editorDeleteConstraint(table: TableInfo, constraint: ConstraintI
     res.primaryKey = null;
   }
 
+  if (constraint.constraintType == 'foreignKey') {
+    res.foreignKeys = table.foreignKeys.filter(x => x.pairingId != constraint.pairingId);
+  }
+
   return res;
 }
diff --git a/packages/web/src/tableeditor/ForeignKeyEditorModal.svelte b/packages/web/src/tableeditor/ForeignKeyEditorModal.svelte
index 5ef105bd6..96d28568f 100644
--- a/packages/web/src/tableeditor/ForeignKeyEditorModal.svelte
+++ b/packages/web/src/tableeditor/ForeignKeyEditorModal.svelte
@@ -71,10 +71,13 @@
             <SelectField
               value={column.columnName}
               isNative
-              options={tableInfo.columns.map(col => ({
-                label: col.columnName,
-                value: col.columnName,
-              }))}
+              options={[
+                { label: '(Not selected)', value: '' },
+                ...tableInfo.columns.map(col => ({
+                  label: col.columnName,
+                  value: col.columnName,
+                })),
+              ]}
               on:change={e => {
                 if (e.detail) {
                   columns = columns.map((col, i) => (i == index ? { ...col, columnName: e.detail } : col));
@@ -88,10 +91,13 @@
             <SelectField
               value={column.refColumnName}
               isNative
-              options={(refTableInfo?.columns || []).map(col => ({
-                label: col.columnName,
-                value: col.columnName,
-              }))}
+              options={[
+                { label: '(Not selected)', value: '' },
+                ...(refTableInfo?.columns || []).map(col => ({
+                  label: col.columnName,
+                  value: col.columnName,
+                })),
+              ]}
               on:change={e => {
                 if (e.detail) {
                   columns = columns.map((col, i) => (i == index ? { ...col, refColumnName: e.detail } : col));