diff --git a/.changeset/clear-filter-button.md b/.changeset/clear-filter-button.md
new file mode 100644
index 00000000000..07fade0e312
--- /dev/null
+++ b/.changeset/clear-filter-button.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/query-devtools': minor
+---
+
+Add clear button to filter input for improved UX. The button appears when the filter has text and clears the filter when clicked, automatically refocusing the input field. Works for both queries and mutations views.
diff --git a/packages/query-devtools/src/Devtools.tsx b/packages/query-devtools/src/Devtools.tsx
index cceec7a3de5..8790237234e 100644
--- a/packages/query-devtools/src/Devtools.tsx
+++ b/packages/query-devtools/src/Devtools.tsx
@@ -676,6 +676,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
   setupQueryCacheSubscription()
   setupMutationCacheSubscription()
   let containerRef!: HTMLDivElement
+  let filterInputRef!: HTMLInputElement
   const theme = useTheme()
   const css = useQueryDevtoolsContext().shadowDOMTarget
     ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
@@ -907,6 +908,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
             >
               <Search />
               <input
+                ref={filterInputRef}
                 aria-label="Filter queries by query key"
                 type="text"
                 placeholder="Filter"
@@ -925,6 +927,30 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                     : props.localStore.mutationFilter || ''
                 }
               />
+              <Show
+                when={
+                  selectedView() === 'queries'
+                    ? props.localStore.filter
+                    : props.localStore.mutationFilter
+                }
+              >
+                <button
+                  type="button"
+                  aria-label="Clear filter"
+                  class={cx(styles().clearFilterBtn, 'tsqd-clear-filter-btn')}
+                  onClick={() => {
+                    if (selectedView() === 'queries') {
+                      props.setLocalStore('filter', '')
+                    } else {
+                      props.setLocalStore('mutationFilter', '')
+                    }
+                    // Focus back to input after clearing
+                    filterInputRef.focus()
+                  }}
+                >
+                  <XCircle />
+                </button>
+              </Show>
             </div>
             <div
               class={cx(
@@ -3258,6 +3284,32 @@ const stylesFactory = (
         outline: 2px solid ${colors.blue[800]};
       }
     `,
+    clearFilterBtn: css`
+      all: unset;
+      user-select: none;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      color: ${t(colors.gray[500], colors.gray[400])};
+      transition: color 0.2s ease;
+      flex-shrink: 0;
+
+      & > svg {
+        width: ${size[3]};
+        height: ${size[3]};
+      }
+
+      &:hover {
+        color: ${t(colors.gray[700], colors.gray[200])};
+      }
+
+      &:focus-visible {
+        outline: 2px solid ${colors.blue[800]};
+        outline-offset: 2px;
+        border-radius: ${border.radius.xs};
+      }
+    `,
     filterSelect: css`
       padding: ${tokens.size[0.5]} ${tokens.size[2]};
       border-radius: ${tokens.border.radius.sm};