diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryOptions.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryOptions.tsx
index 02bd73c38cf..50c432d23a3 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryOptions.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryOptions.tsx
@@ -1,10 +1,10 @@
-import { css, cx } from '@emotion/css';
+import { css } 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, clearButtonStyles, Button } from '@grafana/ui';
+import { useStyles2, RadioButtonGroup, MultiSelect, Input } from '@grafana/ui';
 
+import { QueryOptionGroup } from '../../prometheus/querybuilder/shared/QueryOptionGroup';
 import { Query } from '../types';
 
 import { EditorField } from './EditorField';
@@ -34,7 +34,6 @@ function getTypeOptions(app?: CoreApp) {
  * Base on QueryOptionGroup component from grafana/ui but that is not available yet.
  */
 export function QueryOptions({ query, onQueryChange, app, labels }: Props) {
-  const [isOpen, toggleOpen] = useToggle(false);
   const styles = useStyles2(getStyles);
   const typeOptions = getTypeOptions(app);
   const groupByOptions = labels
@@ -43,26 +42,18 @@ export function QueryOptions({ query, onQueryChange, app, labels }: Props) {
         value: l,
       }))
     : [];
-  const buttonStyles = useStyles2(clearButtonStyles);
+
+  let collapsedInfo = [`Type: ${query.queryType}`];
+  if (query.groupBy?.length) {
+    collapsedInfo.push(`Group by: ${query.groupBy.join(', ')}`);
+  }
+  if (query.maxNodes) {
+    collapsedInfo.push(`Max nodes: ${query.maxNodes}`);
+  }
 
   return (
     <Stack gap={0} direction="column">
-      <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>
-        <h6 className={styles.title}>Options</h6>
-        {!isOpen && (
-          <div className={styles.description}>
-            {[`Type: ${query.queryType}`, query.groupBy?.length ? `Group by: ${query.groupBy.join(', ')}` : undefined]
-              .filter((v) => v)
-              .map((v, i) => (
-                <span key={i}>{v}</span>
-              ))}
-          </div>
-        )}
-      </Button>
-      {isOpen && (
+      <QueryOptionGroup title="Options" collapsedInfo={collapsedInfo}>
         <div className={styles.body}>
           <EditorField label={'Query Type'}>
             <RadioButtonGroup
@@ -105,7 +96,7 @@ export function QueryOptions({ query, onQueryChange, app, labels }: Props) {
             />
           </EditorField>
         </div>
-      )}
+      </QueryOptionGroup>
     </Stack>
   );
 }
@@ -120,38 +111,11 @@ const getStyles = (theme: GrafanaTheme2) => {
         color: theme.colors.text.primary,
       },
     }),
-    header: css({
-      display: 'flex',
-      cursor: 'pointer',
-      alignItems: 'baseline',
-      color: theme.colors.text.primary,
-      '&:hover': {
-        background: theme.colors.emphasize(theme.colors.background.primary, 0.03),
-      },
-    }),
-    title: css({
-      flexGrow: 1,
-      overflow: 'hidden',
-      fontSize: theme.typography.bodySmall.fontSize,
-      fontWeight: theme.typography.fontWeightMedium,
-      margin: 0,
-    }),
-    description: css({
-      color: theme.colors.text.secondary,
-      fontSize: theme.typography.bodySmall.fontSize,
-      paddingLeft: theme.spacing(2),
-      gap: theme.spacing(2),
-      display: 'flex',
-    }),
     body: css({
       display: 'flex',
       paddingTop: theme.spacing(2),
       gap: theme.spacing(2),
       flexWrap: 'wrap',
     }),
-    toggle: css({
-      color: theme.colors.text.secondary,
-      marginRight: `${theme.spacing(1)}`,
-    }),
   };
 };