diff --git a/packages/web/src/dbkeyvalue/DbKeyItemDetail.svelte b/packages/web/src/dbkeyvalue/DbKeyItemDetail.svelte
index 8e927d976..77bcdd446 100644
--- a/packages/web/src/dbkeyvalue/DbKeyItemDetail.svelte
+++ b/packages/web/src/dbkeyvalue/DbKeyItemDetail.svelte
@@ -3,13 +3,25 @@
 
   export let keyInfo;
   export let item;
+  export let onChangeItem;
 </script>
 
 <div class="props">
   {#each keyInfo.tableColumns as column}
     <div class="colname">{column.name}</div>
     <div class="colvalue">
-      <AceEditor readOnly value={item && item[column.name]} />
+      <AceEditor
+        readOnly={!onChangeItem}
+        value={item && item[column.name]}
+        on:input={e => {
+          if (onChangeItem) {
+            onChangeItem({
+              ...item,
+              [column.name]: e.detail,
+            });
+          }
+        }}
+      />
     </div>
   {/each}
 </div>
diff --git a/packages/web/src/modals/DbKeyAddItemModal.svelte b/packages/web/src/modals/DbKeyAddItemModal.svelte
index 2bdab7000..57122c545 100644
--- a/packages/web/src/modals/DbKeyAddItemModal.svelte
+++ b/packages/web/src/modals/DbKeyAddItemModal.svelte
@@ -1,36 +1,47 @@
 <script lang="ts">
   import FormStyledButton from '../buttons/FormStyledButton.svelte';
-import DbKeyItemDetail from '../dbkeyvalue/DbKeyItemDetail.svelte';
+  import DbKeyItemDetail from '../dbkeyvalue/DbKeyItemDetail.svelte';
 
   import FormProvider from '../forms/FormProvider.svelte';
-  import FormSubmit from '../forms/FormSubmit.svelte';
-  import FormTextField from '../forms/FormTextField.svelte';
   import ModalBase from './ModalBase.svelte';
   import { closeCurrentModal } from './modalTools';
 
   export let keyInfo;
-  export let value;
   export let label;
   export let onConfirm;
 
-  const handleSubmit = async values => {
-    const { value } = values;
+  let item = {};
+
+  const handleSubmit = async () => {
     closeCurrentModal();
-    onConfirm(value);
+    onConfirm(item);
   };
 </script>
 
-<FormProvider initialValues={{ value }}>
+<FormProvider>
   <ModalBase {...$$restProps}>
-    <svelte:fragment slot="header">
-      Add item
-    </svelte:fragment>
+    <svelte:fragment slot="header">Add item</svelte:fragment>
 
-    <DbKeyItemDetail {keyInfo} />
+    <div class="container">
+      <DbKeyItemDetail
+        {keyInfo}
+        {item}
+        onChangeItem={value => {
+          item = value;
+        }}
+      />
+    </div>
 
     <svelte:fragment slot="footer">
-      <FormSubmit value="OK" on:click={e => handleSubmit(e.detail)} />
+      <FormStyledButton value="OK" on:click={e => handleSubmit()} />
       <FormStyledButton type="button" value="Cancel" on:click={closeCurrentModal} />
     </svelte:fragment>
   </ModalBase>
 </FormProvider>
+
+<style>
+  .container {
+    display: flex;
+    height: 30vh;
+  }
+</style>
diff --git a/packages/web/src/tabs/DbKeyDetailTab.svelte b/packages/web/src/tabs/DbKeyDetailTab.svelte
index 31dda6871..e3f0b733b 100644
--- a/packages/web/src/tabs/DbKeyDetailTab.svelte
+++ b/packages/web/src/tabs/DbKeyDetailTab.svelte
@@ -83,7 +83,18 @@
   }
 
   async function addItem(keyInfo) {
-    showModal(DbKeyAddItemModal, { keyInfo });
+    showModal(DbKeyAddItemModal, {
+      keyInfo,
+      onConfirm: async row => {
+        await apiCall('database-connections/call-method', {
+          conid,
+          database,
+          method: keyInfo.addMethod,
+          args: [keyInfo.key, ...keyInfo.tableColumns.map(col => row[col.name])],
+        });
+        refresh();
+      },
+    });
   }
 </script>