diff --git a/.betterer.results b/.betterer.results
index e14d97f73cc..dd98080fa88 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -6656,9 +6656,6 @@ exports[`better eslint`] = {
     "public/app/plugins/datasource/jaeger/components/QueryEditor.tsx:5381": [
       [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
     ],
-    "public/app/plugins/datasource/jaeger/configuration/ConfigEditor.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/plugins/datasource/jaeger/configuration/TraceIdTimeParams.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"]
@@ -6874,9 +6871,6 @@ exports[`better eslint`] = {
     "public/app/plugins/datasource/tempo/webpack.config.ts:5381": [
       [0, 0, 0, "Do not re-export imported variable (\`config\`)", "0"]
     ],
-    "public/app/plugins/datasource/zipkin/ConfigEditor.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/plugins/datasource/zipkin/QueryField.tsx:5381": [
       [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"],
@@ -7984,11 +7978,6 @@ exports[`no gf-form usage`] = {
     "public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx:5381": [
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
-    "public/app/plugins/datasource/grafana-pyroscope-datasource/ConfigEditor.tsx:5381": [
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
-      [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
-    ],
     "public/app/plugins/datasource/influxdb/components/editor/annotation/AnnotationEditor.tsx:5381": [
       [0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
     ],
diff --git a/public/app/plugins/datasource/grafana-pyroscope-datasource/ConfigEditor.tsx b/public/app/plugins/datasource/grafana-pyroscope-datasource/ConfigEditor.tsx
index 919563fec88..1ecbab4d42b 100644
--- a/public/app/plugins/datasource/grafana-pyroscope-datasource/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/grafana-pyroscope-datasource/ConfigEditor.tsx
@@ -1,8 +1,26 @@
+import { css } from '@emotion/css';
 import React from 'react';
 
-import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
+import {
+  AdvancedHttpSettings,
+  Auth,
+  ConfigSection,
+  ConfigSubSection,
+  ConnectionSettings,
+  DataSourceDescription,
+  convertLegacyAuthProps,
+} from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { DataSourceHttpSettings, EventsWithValidation, LegacyForms, regexValidation } from '@grafana/ui';
+import {
+  Divider,
+  EventsWithValidation,
+  LegacyForms,
+  SecureSocksProxySettings,
+  Stack,
+  regexValidation,
+  useStyles2,
+} from '@grafana/ui';
 
 import { PyroscopeDataSourceOptions } from './types';
 
@@ -10,21 +28,43 @@ interface Props extends DataSourcePluginOptionsEditorProps<PyroscopeDataSourceOp
 
 export const ConfigEditor = (props: Props) => {
   const { options, onOptionsChange } = props;
+  const styles = useStyles2(getStyles);
 
   return (
-    <>
-      <DataSourceHttpSettings
-        defaultUrl={'http://localhost:4040'}
-        dataSourceConfig={options}
-        showAccessOptions={false}
-        onChange={onOptionsChange}
-        secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
+    <div className={styles.container}>
+      <DataSourceDescription
+        dataSourceName="Pyroscope"
+        docsLink="https://grafana.com/docs/grafana/latest/datasources/pyroscope"
+        hasRequiredFields={false}
       />
 
-      <h3 className="page-heading">Querying</h3>
-      <div className="gf-form-group">
-        <div className="gf-form-inline">
-          <div className="gf-form">
+      <Divider spacing={4} />
+
+      <ConnectionSettings config={options} onChange={onOptionsChange} urlPlaceholder="http://localhost:4040" />
+
+      <Divider spacing={4} />
+      <Auth
+        {...convertLegacyAuthProps({
+          config: options,
+          onChange: onOptionsChange,
+        })}
+      />
+
+      <Divider spacing={4} />
+      <ConfigSection
+        title="Additional settings"
+        description="Additional settings are optional settings that can be configured for more control over your data source."
+        isCollapsible={true}
+        isInitiallyOpen={false}
+      >
+        <Stack gap={5} direction="column">
+          <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
+
+          {config.secureSocksDSProxyEnabled && (
+            <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+          )}
+
+          <ConfigSubSection title="Querying">
             <LegacyForms.FormField
               label="Minimal step"
               labelWidth={13}
@@ -55,9 +95,16 @@ export const ConfigEditor = (props: Props) => {
               }
               tooltip="Minimal step used for metric query. Should be the same or higher as the scrape interval setting in the Pyroscope database."
             />
-          </div>
-        </div>
-      </div>
-    </>
+          </ConfigSubSection>
+        </Stack>
+      </ConfigSection>
+    </div>
   );
 };
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css({
+    marginBottom: theme.spacing(2),
+    maxWidth: '900px',
+  }),
+});
diff --git a/public/app/plugins/datasource/jaeger/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/jaeger/configuration/ConfigEditor.tsx
index 0eb57f2a383..5517e272c3c 100644
--- a/public/app/plugins/datasource/jaeger/configuration/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/jaeger/configuration/ConfigEditor.tsx
@@ -2,10 +2,17 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
-import { ConfigSection, DataSourceDescription } from '@grafana/experimental';
+import {
+  AdvancedHttpSettings,
+  Auth,
+  ConfigSection,
+  ConnectionSettings,
+  DataSourceDescription,
+  convertLegacyAuthProps,
+} from '@grafana/experimental';
 import { NodeGraphSection, SpanBarSection, TraceToLogsSection, TraceToMetricsSection } from '@grafana/o11y-ds-frontend';
 import { config } from '@grafana/runtime';
-import { DataSourceHttpSettings, useStyles2, Divider, Stack } from '@grafana/ui';
+import { useStyles2, Divider, Stack, SecureSocksProxySettings } from '@grafana/ui';
 
 import { TraceIdTimeParams } from './TraceIdTimeParams';
 
@@ -24,14 +31,17 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
 
       <Divider spacing={4} />
 
-      <DataSourceHttpSettings
-        defaultUrl="http://localhost:16686"
-        dataSourceConfig={options}
-        showAccessOptions={false}
-        onChange={onOptionsChange}
-        secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
+      <ConnectionSettings config={options} onChange={onOptionsChange} urlPlaceholder="http://localhost:16686" />
+
+      <Divider spacing={4} />
+      <Auth
+        {...convertLegacyAuthProps({
+          config: options,
+          onChange: onOptionsChange,
+        })}
       />
 
+      <Divider spacing={4} />
       <TraceToLogsSection options={options} onOptionsChange={onOptionsChange} />
       <Divider spacing={4} />
 
@@ -45,6 +55,12 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
         isInitiallyOpen={false}
       >
         <Stack gap={5} direction="column">
+          <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
+
+          {config.secureSocksDSProxyEnabled && (
+            <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+          )}
+
           <NodeGraphSection options={options} onOptionsChange={onOptionsChange} />
           <SpanBarSection options={options} onOptionsChange={onOptionsChange} />
           <TraceIdTimeParams options={options} onOptionsChange={onOptionsChange} />
@@ -55,9 +71,8 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  container: css`
-    label: container;
-    margin-bottom: ${theme.spacing(2)};
-    max-width: 900px;
-  `,
+  container: css({
+    marginBottom: theme.spacing(2),
+    maxWidth: '900px',
+  }),
 });
diff --git a/public/app/plugins/datasource/parca/ConfigEditor.tsx b/public/app/plugins/datasource/parca/ConfigEditor.tsx
index b6c694b186c..9332d4cea4d 100644
--- a/public/app/plugins/datasource/parca/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/parca/ConfigEditor.tsx
@@ -1,8 +1,17 @@
+import { css } from '@emotion/css';
 import React from 'react';
 
-import { DataSourcePluginOptionsEditorProps } from '@grafana/data';
+import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
+import {
+  AdvancedHttpSettings,
+  Auth,
+  ConfigSection,
+  ConnectionSettings,
+  DataSourceDescription,
+  convertLegacyAuthProps,
+} from '@grafana/experimental';
 import { config } from '@grafana/runtime';
-import { DataSourceHttpSettings } from '@grafana/ui';
+import { Divider, SecureSocksProxySettings, Stack, useStyles2 } from '@grafana/ui';
 
 import { ParcaDataSourceOptions } from './types';
 
@@ -10,16 +19,50 @@ interface Props extends DataSourcePluginOptionsEditorProps<ParcaDataSourceOption
 
 export const ConfigEditor = (props: Props) => {
   const { options, onOptionsChange } = props;
+  const styles = useStyles2(getStyles);
 
   return (
-    <>
-      <DataSourceHttpSettings
-        defaultUrl={'http://localhost:7070'}
-        dataSourceConfig={options}
-        showAccessOptions={false}
-        onChange={onOptionsChange}
-        secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
+    <div className={styles.container}>
+      <DataSourceDescription
+        dataSourceName="Parca"
+        docsLink="https://grafana.com/docs/grafana/latest/datasources/parca"
+        hasRequiredFields={false}
       />
-    </>
+
+      <Divider spacing={4} />
+
+      <ConnectionSettings config={options} onChange={onOptionsChange} urlPlaceholder="http://localhost:7070" />
+
+      <Divider spacing={4} />
+      <Auth
+        {...convertLegacyAuthProps({
+          config: options,
+          onChange: onOptionsChange,
+        })}
+      />
+
+      <Divider spacing={4} />
+      <ConfigSection
+        title="Additional settings"
+        description="Additional settings are optional settings that can be configured for more control over your data source."
+        isCollapsible={true}
+        isInitiallyOpen={false}
+      >
+        <Stack gap={5} direction="column">
+          <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
+
+          {config.secureSocksDSProxyEnabled && (
+            <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+          )}
+        </Stack>
+      </ConfigSection>
+    </div>
   );
 };
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css({
+    marginBottom: theme.spacing(2),
+    maxWidth: '900px',
+  }),
+});
diff --git a/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
index 9e8a3310e62..324627f5875 100644
--- a/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
@@ -70,9 +70,7 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
           <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
 
           {config.secureSocksDSProxyEnabled && (
-            <>
-              <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
-            </>
+            <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
           )}
 
           <ConfigSubSection
@@ -125,7 +123,6 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
 
 const getStyles = (theme: GrafanaTheme2) => ({
   container: css({
-    label: 'container',
     marginBottom: theme.spacing(2),
     maxWidth: '900px',
   }),
diff --git a/public/app/plugins/datasource/zipkin/ConfigEditor.tsx b/public/app/plugins/datasource/zipkin/ConfigEditor.tsx
index 3bd0a076328..bb9c440aafe 100644
--- a/public/app/plugins/datasource/zipkin/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/zipkin/ConfigEditor.tsx
@@ -2,10 +2,17 @@ import { css } from '@emotion/css';
 import React from 'react';
 
 import { DataSourcePluginOptionsEditorProps, GrafanaTheme2 } from '@grafana/data';
-import { ConfigSection, DataSourceDescription } from '@grafana/experimental';
+import {
+  AdvancedHttpSettings,
+  Auth,
+  ConfigSection,
+  ConnectionSettings,
+  DataSourceDescription,
+  convertLegacyAuthProps,
+} from '@grafana/experimental';
 import { NodeGraphSection, SpanBarSection, TraceToLogsSection, TraceToMetricsSection } from '@grafana/o11y-ds-frontend';
 import { config } from '@grafana/runtime';
-import { DataSourceHttpSettings, useStyles2, Divider, Stack } from '@grafana/ui';
+import { useStyles2, Divider, Stack, SecureSocksProxySettings } from '@grafana/ui';
 
 export type Props = DataSourcePluginOptionsEditorProps;
 
@@ -22,14 +29,17 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
 
       <Divider spacing={4} />
 
-      <DataSourceHttpSettings
-        defaultUrl="http://localhost:9411"
-        dataSourceConfig={options}
-        showAccessOptions={false}
-        onChange={onOptionsChange}
-        secureSocksDSProxyEnabled={config.secureSocksDSProxyEnabled}
+      <ConnectionSettings config={options} onChange={onOptionsChange} urlPlaceholder="http://localhost:9411" />
+
+      <Divider spacing={4} />
+      <Auth
+        {...convertLegacyAuthProps({
+          config: options,
+          onChange: onOptionsChange,
+        })}
       />
 
+      <Divider spacing={4} />
       <TraceToLogsSection options={options} onOptionsChange={onOptionsChange} />
       <Divider spacing={4} />
 
@@ -43,6 +53,12 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
         isInitiallyOpen={false}
       >
         <Stack gap={5} direction="column">
+          <AdvancedHttpSettings config={options} onChange={onOptionsChange} />
+
+          {config.secureSocksDSProxyEnabled && (
+            <SecureSocksProxySettings options={options} onOptionsChange={onOptionsChange} />
+          )}
+
           <NodeGraphSection options={options} onOptionsChange={onOptionsChange} />
           <SpanBarSection options={options} onOptionsChange={onOptionsChange} />
         </Stack>
@@ -52,9 +68,8 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  container: css`
-    label: container;
-    margin-bottom: ${theme.spacing(2)};
-    max-width: 900px;
-  `,
+  container: css({
+    marginBottom: theme.spacing(2),
+    maxWidth: '900px',
+  }),
 });