diff --git a/public/app/plugins/datasource/parca/QueryEditor/QueryOptions.tsx b/public/app/plugins/datasource/parca/QueryEditor/QueryOptions.tsx
index 29524149653..e6cecc4a43a 100644
--- a/public/app/plugins/datasource/parca/QueryEditor/QueryOptions.tsx
+++ b/public/app/plugins/datasource/parca/QueryEditor/QueryOptions.tsx
@@ -1,9 +1,9 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import React from 'react';
 import { useToggle } from 'react-use';
 
 import { CoreApp, GrafanaTheme2 } from '@grafana/data';
-import { Icon, useStyles2, RadioButtonGroup, Field } from '@grafana/ui';
+import { Icon, useStyles2, RadioButtonGroup, Field, clearButtonStyles, Button } from '@grafana/ui';
 
 import { Query } from '../types';
 
@@ -35,10 +35,11 @@ export function QueryOptions({ query, onQueryTypeChange, app }: Props) {
   const [isOpen, toggleOpen] = useToggle(false);
   const styles = useStyles2(getStyles);
   const options = getOptions(app);
+  const buttonStyles = useStyles2(clearButtonStyles);
 
   return (
     <Stack gap={0} direction="column">
-      <div className={styles.header} onClick={toggleOpen} title="Click to edit options">
+      <Button className={cx(styles.header, buttonStyles)} onClick={toggleOpen} title="Click to edit options">
         <div className={styles.toggle}>
           <Icon name={isOpen ? 'angle-down' : 'angle-right'} />
         </div>
@@ -48,7 +49,7 @@ export function QueryOptions({ query, onQueryTypeChange, app }: Props) {
             <span>Type: {query.queryType}</span>
           </div>
         )}
-      </div>
+      </Button>
       {isOpen && (
         <div className={styles.body}>
           <Field label={'Query Type'}>
diff --git a/public/app/plugins/datasource/phlare/QueryEditor/QueryOptions.tsx b/public/app/plugins/datasource/phlare/QueryEditor/QueryOptions.tsx
index 8723716b98a..02bd73c38cf 100644
--- a/public/app/plugins/datasource/phlare/QueryEditor/QueryOptions.tsx
+++ b/public/app/plugins/datasource/phlare/QueryEditor/QueryOptions.tsx
@@ -1,9 +1,9 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import React from 'react';
 import { useToggle } from 'react-use';
 
 import { CoreApp, GrafanaTheme2, SelectableValue } from '@grafana/data';
-import { Icon, useStyles2, RadioButtonGroup, MultiSelect, Input } from '@grafana/ui';
+import { Icon, useStyles2, RadioButtonGroup, MultiSelect, Input, clearButtonStyles, Button } from '@grafana/ui';
 
 import { Query } from '../types';
 
@@ -43,10 +43,11 @@ export function QueryOptions({ query, onQueryChange, app, labels }: Props) {
         value: l,
       }))
     : [];
+  const buttonStyles = useStyles2(clearButtonStyles);
 
   return (
     <Stack gap={0} direction="column">
-      <div className={styles.header} onClick={toggleOpen} title="Click to edit options">
+      <Button className={cx(styles.header, buttonStyles)} onClick={toggleOpen} title="Click to edit options">
         <div className={styles.toggle}>
           <Icon name={isOpen ? 'angle-down' : 'angle-right'} />
         </div>
@@ -60,7 +61,7 @@ export function QueryOptions({ query, onQueryChange, app, labels }: Props) {
               ))}
           </div>
         )}
-      </div>
+      </Button>
       {isOpen && (
         <div className={styles.body}>
           <EditorField label={'Query Type'}>