diff --git a/packages/web/src/commands/stdCommands.ts b/packages/web/src/commands/stdCommands.ts
index bc7484191..f32451350 100644
--- a/packages/web/src/commands/stdCommands.ts
+++ b/packages/web/src/commands/stdCommands.ts
@@ -218,40 +218,6 @@ registerCommand({
   },
 });
 
-registerCommand({
-  id: 'new.dbKey',
-  category: 'New',
-  name: 'Key',
-  toolbar: true,
-  toolbarName: 'New key',
-  testEnabled: () => {
-    const driver = findEngineDriver(get(currentDatabase)?.connection, getExtensions());
-    return !!get(currentDatabase) && driver?.databaseEngineTypes?.includes('keyvalue');
-  },
-  onClick: async () => {
-    const $currentDatabase = get(currentDatabase);
-    const connection = _.get($currentDatabase, 'connection') || {};
-    const database = _.get($currentDatabase, 'name');
-    const driver = findEngineDriver(get(currentDatabase)?.connection, getExtensions());
-
-    showModal(AddDbKeyModal, {
-      conid: connection._id,
-      database,
-      driver,
-      onConfirm: async item => {
-        const type = driver.supportedKeyTypes.find(x => x.name == item.type);
-
-        await apiCall('database-connections/call-method', {
-          conid: connection._id,
-          database,
-          method: type.addMethod,
-          args: [item.keyName, ...type.dbKeyFields.map(fld => item[fld.name])],
-        });
-      },
-    });
-  },
-});
-
 registerCommand({
   id: 'new.markdown',
   category: 'New',
diff --git a/packages/web/src/widgets/DbKeysTree.svelte b/packages/web/src/widgets/DbKeysTree.svelte
index ac6a14fdd..d785e6b7d 100644
--- a/packages/web/src/widgets/DbKeysTree.svelte
+++ b/packages/web/src/widgets/DbKeysTree.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { findEngineDriver } from 'dbgate-tools';
+
   import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
   import InlineButton from '../buttons/InlineButton.svelte';
   import runCommand from '../commands/runCommand';
@@ -6,6 +8,10 @@
   import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
   import SearchInput from '../elements/SearchInput.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
+  import AddDbKeyModal from '../modals/AddDbKeyModal.svelte';
+  import { showModal } from '../modals/modalTools';
+  import { currentDatabase, getExtensions } from '../stores';
+  import { apiCall } from '../utility/api';
 
   import DbKeysSubTree from './DbKeysSubTree.svelte';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
@@ -19,12 +25,36 @@
   function handleRefreshDatabase() {
     reloadToken += 1;
   }
+
+  function handleAddKey() {
+    const connection = $currentDatabase?.connection;
+    const database = $currentDatabase?.name;
+    const driver = findEngineDriver(connection, getExtensions());
+
+    showModal(AddDbKeyModal, {
+      conid: connection._id,
+      database,
+      driver,
+      onConfirm: async item => {
+        const type = driver.supportedKeyTypes.find(x => x.name == item.type);
+
+        await apiCall('database-connections/call-method', {
+          conid: connection._id,
+          database,
+          method: type.addMethod,
+          args: [item.keyName, ...type.dbKeyFields.map(fld => item[fld.name])],
+        });
+
+        handleRefreshDatabase();
+      },
+    });
+  }
 </script>
 
 <SearchBoxWrapper>
   <SearchInput placeholder="Search keys" bind:value={filter} />
   <CloseSearchButton bind:filter />
-  <InlineButton on:click={() => runCommand('new.dbKey')} title="Add new key">
+  <InlineButton on:click={handleAddKey} title="Add new key">
     <FontIcon icon="icon plus-thick" />
   </InlineButton>
   <InlineButton on:click={handleRefreshDatabase} title="Refresh key list">