diff --git a/packages/grafana-data/src/index.ts b/packages/grafana-data/src/index.ts
index ec84e8f0d7b..e195fa204cf 100644
--- a/packages/grafana-data/src/index.ts
+++ b/packages/grafana-data/src/index.ts
@@ -590,6 +590,7 @@ export {
   type AngularMeta,
   type PluginMeta,
   type PluginDependencies,
+  type PluginDependencyInfo,
   type PluginExtensions,
   type PluginInclude,
   type PluginBuildInfo,
diff --git a/packages/grafana-runtime/src/config.ts b/packages/grafana-runtime/src/config.ts
index 864c9ef01d6..c53eae901dd 100644
--- a/packages/grafana-runtime/src/config.ts
+++ b/packages/grafana-runtime/src/config.ts
@@ -19,8 +19,8 @@ import {
   AngularMeta,
   PluginLoadingStrategy,
   PluginDependencies,
+  PluginDependencyInfo,
   PluginExtensions,
-  PluginType,
 } from '@grafana/data';
 
 export interface AzureSettings {
@@ -55,13 +55,6 @@ export type PreinstalledPlugin = {
   version: string;
 };
 
-export type DependantInfo = {
-  pluginId: string;
-  pluginName: string;
-  pluginVersion: string;
-  pluginType: PluginType;
-};
-
 export class GrafanaBootConfig implements GrafanaConfig {
   publicDashboardAccessToken?: string;
   publicDashboardsEnabled = true;
@@ -149,7 +142,7 @@ export class GrafanaBootConfig implements GrafanaConfig {
   pluginCatalogManagedPlugins: string[] = [];
   pluginCatalogPreinstalledPlugins: PreinstalledPlugin[] = [];
   pluginsCDNBaseURL = '';
-  pluginDependants?: { [key: string]: DependantInfo[] } = {};
+  pluginDependants?: { [key: string]: PluginDependencyInfo[] } = {};
   expressionsEnabled = false;
   awsAllowedAuthProviders: string[] = [];
   awsAssumeRoleEnabled = false;
diff --git a/pkg/api/dtos/frontend_settings.go b/pkg/api/dtos/frontend_settings.go
index aa042bc6266..673a821e69d 100644
--- a/pkg/api/dtos/frontend_settings.go
+++ b/pkg/api/dtos/frontend_settings.go
@@ -153,10 +153,10 @@ type FrontendSettingsSqlConnectionLimitsDTO struct {
 }
 
 type DependencyInfo struct {
-	PluginID      string `json:"pluginId"`
-	PluginName    string `json:"pluginName"`
-	PluginType    string `json:"pluginType"`
-	PluginVersion string `json:"pluginVersion"`
+	PluginID      string `json:"id"`
+	PluginName    string `json:"name"`
+	PluginType    string `json:"type"`
+	PluginVersion string `json:"version"`
 }
 
 type FrontendSettingsDTO struct {
diff --git a/public/app/features/plugins/admin/components/InstallControls/InstallControlsButton.tsx b/public/app/features/plugins/admin/components/InstallControls/InstallControlsButton.tsx
index e76feb357f8..0b3e7cffd4d 100644
--- a/public/app/features/plugins/admin/components/InstallControls/InstallControlsButton.tsx
+++ b/public/app/features/plugins/admin/components/InstallControls/InstallControlsButton.tsx
@@ -127,7 +127,7 @@ export function InstallControlsButton({
   }
 
   // TODO && parent plugin is still installed
-  const dependencyOf = plugin.details?.dependantPlugins?.map((dep) => dep.pluginName);
+  const dependencyOf = plugin.details?.dependantPlugins?.map((dep) => dep.name);
   if (dependencyOf?.length) {
     disableUninstall = true;
     uninstallTitle = `Dependent plugins must be removed first: ${dependencyOf.join(', ')}`;
diff --git a/public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx b/public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx
index 7b0a0f07625..4aceeaa5c24 100644
--- a/public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx
+++ b/public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx
@@ -16,6 +16,7 @@ export function PluginDetailsHeaderDependencies({ plugin, grafanaDependency }: P
   const styles = useStyles2(getStyles);
   const pluginDependencies = plugin.details?.pluginDependencies;
   const hasNoDependencyInfo = !grafanaDependency && (!pluginDependencies || !pluginDependencies.length);
+  const pluginDependants = plugin.details?.dependantPlugins;
 
   if (hasNoDependencyInfo) {
     return null;
@@ -44,6 +45,19 @@ export function PluginDetailsHeaderDependencies({ plugin, grafanaDependency }: P
           })}
         </div>
       )}
+
+      {pluginDependants && pluginDependants.length > 0 && (
+        <Stack direction="column" gap={1}>
+          {pluginDependants.map((p) => {
+            return (
+              <span key={p.id} className={styles.depBadge}>
+                <Icon name={PluginIconName[p.type]} className={styles.icon} />
+                {p.name}
+              </span>
+            );
+          })}
+        </Stack>
+      )}
     </Stack>
   );
 }
diff --git a/public/app/features/plugins/admin/components/PluginDetailsPanel.tsx b/public/app/features/plugins/admin/components/PluginDetailsPanel.tsx
index e4dc7cbf44a..d45e50010b7 100644
--- a/public/app/features/plugins/admin/components/PluginDetailsPanel.tsx
+++ b/public/app/features/plugins/admin/components/PluginDetailsPanel.tsx
@@ -2,8 +2,8 @@ import { css } from '@emotion/css';
 import { useState } from 'react';
 import * as React from 'react';
 
-import { GrafanaTheme2 } from '@grafana/data';
-import { config, DependantInfo, reportInteraction } from '@grafana/runtime';
+import { GrafanaTheme2, PluginDependencyInfo } from '@grafana/data';
+import { config, reportInteraction } from '@grafana/runtime';
 import { PageInfoItem } from '@grafana/runtime/src/components/PluginPage';
 import {
   Stack,
@@ -65,7 +65,7 @@ export function PluginDetailsPanel(props: Props): React.ReactElement | null {
     grafanaDependency = latestCompatibleVersion?.grafanaDependency;
   }
 
-  let pluginDependants: DependantInfo[] = [];
+  let pluginDependants: PluginDependencyInfo[] = [];
   if (config.pluginDependants && config.pluginDependants[plugin.id]) {
     pluginDependants = config.pluginDependants[plugin.id];
   }
@@ -126,19 +126,14 @@ export function PluginDetailsPanel(props: Props): React.ReactElement | null {
 
               {pluginDependencies && pluginDependencies.length > 0 && (
                 <Stack direction="column" gap={1}>
-                  <Text color="secondary">
-                    <Trans i18nKey={'plugins.details.labels.pluginDependencies'}>Plugins: </Trans>
-                  </Text>
-                  <Stack direction="column" gap={2}>
-                    {pluginDependencies.map((p) => {
-                      return (
-                        <TextLink key={p.id} href={'/plugins/' + p.id}>
-                          <Icon name={PluginIconName[p.type]} className={styles.icon} />
-                          {p.name} {p.version}
-                        </TextLink>
-                      );
-                    })}
-                  </Stack>
+                  {pluginDependencies.map((p) => {
+                    return (
+                      <TextLink key={p.id} href={'/plugins/' + p.id}>
+                        <Icon name={PluginIconName[p.type]} className={styles.icon} />
+                        {p.name} {p.version}
+                      </TextLink>
+                    );
+                  })}
                 </Stack>
               )}
 
@@ -149,9 +144,9 @@ export function PluginDetailsPanel(props: Props): React.ReactElement | null {
                   </Text>
                   {pluginDependants.map((p) => {
                     return (
-                      <TextLink key={p.pluginId} href={'/plugins/' + p.pluginId}>
-                        <Icon name={PluginIconName[p.pluginType]} className={styles.icon} />
-                        {p.pluginName} {p.pluginVersion}
+                      <TextLink key={p.id} href={'/plugins/' + p.id}>
+                        <Icon name={PluginIconName[p.type]} className={styles.icon} />
+                        {p.name} {p.version}
                       </TextLink>
                     );
                   })}
diff --git a/public/app/features/plugins/admin/helpers.ts b/public/app/features/plugins/admin/helpers.ts
index 8e8c4c80d3c..3e28d8d59bf 100644
--- a/public/app/features/plugins/admin/helpers.ts
+++ b/public/app/features/plugins/admin/helpers.ts
@@ -1,7 +1,14 @@
 import uFuzzy from '@leeoniya/ufuzzy';
 
-import { PluginSignatureStatus, dateTimeParse, PluginError, PluginType, PluginErrorCode } from '@grafana/data';
-import { config, DependantInfo, featureEnabled } from '@grafana/runtime';
+import {
+  PluginSignatureStatus,
+  dateTimeParse,
+  PluginError,
+  PluginType,
+  PluginErrorCode,
+  PluginDependencyInfo,
+} from '@grafana/data';
+import { config, featureEnabled } from '@grafana/runtime';
 import { Settings } from 'app/core/config';
 import { contextSrv } from 'app/core/core';
 import { getBackendSrv } from 'app/core/services/backend_srv';
@@ -421,13 +428,13 @@ export function isManagedPlugin(id: string) {
   return pluginCatalogManagedPlugins?.includes(id);
 }
 
-export function dependantPlugins(id: string): DependantInfo[] {
+export function dependantPlugins(id: string): PluginDependencyInfo[] {
   const { pluginDependants } = config;
   if (!pluginDependants) {
     return [];
   }
 
-  const dependants: DependantInfo[] = [];
+  const dependants: PluginDependencyInfo[] = [];
   if (pluginDependants[id]) {
     for (let dependant of pluginDependants[id]) {
       dependants.push(dependant);
diff --git a/public/app/features/plugins/admin/types.ts b/public/app/features/plugins/admin/types.ts
index fc956d0f1b5..78a5cb77f39 100644
--- a/public/app/features/plugins/admin/types.ts
+++ b/public/app/features/plugins/admin/types.ts
@@ -8,7 +8,7 @@ import {
   PluginErrorCode,
   WithAccessControlMetadata,
 } from '@grafana/data';
-import { DependantInfo } from '@grafana/runtime';
+import { PluginDependencyInfo } from '@grafana/data/src/types/plugin';
 import { IconName } from '@grafana/ui';
 import { StoreState, PluginsState } from 'app/types';
 
@@ -75,7 +75,7 @@ export interface CatalogPluginDetails {
   links: Rel[];
   grafanaDependency?: string;
   pluginDependencies?: PluginDependencies['plugins'];
-  dependantPlugins?: DependantInfo[];
+  dependantPlugins?: PluginDependencyInfo[];
   statusContext?: string;
   iam?: IdentityAccessManagement;
   changelog?: string;