diff --git a/packages/web/src/buttons/CloseSearchButton.svelte b/packages/web/src/buttons/CloseSearchButton.svelte
index 811afc7d6..693054d22 100644
--- a/packages/web/src/buttons/CloseSearchButton.svelte
+++ b/packages/web/src/buttons/CloseSearchButton.svelte
@@ -4,15 +4,17 @@
   import InlineButton from './InlineButton.svelte';
 
   export let filter;
+  export let showDisabled = false;
 </script>
 
-{#if filter}
+{#if filter || showDisabled}
   <InlineButton
     on:click
     on:click={() => {
       filter = '';
     }}
     title="Clear filter"
+    disabled={!filter}
   >
     <FontIcon icon="icon close" />
   </InlineButton>
diff --git a/packages/web/src/tabs/CommandListTab.svelte b/packages/web/src/tabs/CommandListTab.svelte
index 046dd48b8..cf2f6c850 100644
--- a/packages/web/src/tabs/CommandListTab.svelte
+++ b/packages/web/src/tabs/CommandListTab.svelte
@@ -3,7 +3,11 @@
 </script>
 
 <script lang="ts">
+  import { filterName } from 'dbgate-tools';
+
   import _ from 'lodash';
+  import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
+  import SearchInput from '../elements/SearchInput.svelte';
 
   import TableControl from '../elements/TableControl.svelte';
   import CommandModal from '../modals/CommandModal.svelte';
@@ -11,25 +15,38 @@
   import { commandsCustomized } from '../stores';
 
   $: commandList = _.sortBy(_.values($commandsCustomized), ['category', 'name']);
+  let filter;
 </script>
 
 <div class="wrapper">
-  <TableControl
-    clickable
-    rows={commandList}
-    columns={[
-      { header: 'Category', fieldName: 'category' },
-      { header: 'Name', fieldName: 'name' },
-      { header: 'Keyboard shortcut', fieldName: 'keyText', isHighlighted: row => row.customKeyboardShortcut },
-      { header: 'commandId', fieldName: 'id' },
-    ]}
-    on:clickrow={e => showModal(CommandModal, { command: e.detail })}
-  />
+  <div class="flex">
+    <SearchInput placeholder="Search in commands (by category, name, shortcut or id)" bind:value={filter} />
+    <CloseSearchButton bind:filter showDisabled />
+  </div>
+
+  <div class="table-wrapper">
+    <TableControl
+      clickable
+      rows={commandList.filter(cmd => filterName(filter, cmd['category'], cmd['name'], cmd['keyText'], cmd['id']))}
+      columns={[
+        { header: 'Category', fieldName: 'category' },
+        { header: 'Name', fieldName: 'name' },
+        { header: 'Keyboard shortcut', fieldName: 'keyText', isHighlighted: row => row.customKeyboardShortcut },
+        { header: 'commandId', fieldName: 'id' },
+      ]}
+      on:clickrow={e => showModal(CommandModal, { command: e.detail })}
+    />
+  </div>
 </div>
 
 <style>
   .wrapper {
-    overflow: auto;
     flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  .table-wrapper {
+    overflow: auto;
+    display: flex;
   }
 </style>