diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/AddDataItemMenu.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/AddDataItemMenu.tsx
index 74148de7d83..045fd7e214c 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/AddDataItemMenu.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/AddDataItemMenu.tsx
@@ -4,7 +4,7 @@ import { ComponentProps, memo, useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { t } from '@grafana/i18n';
import { config } from '@grafana/runtime';
-import { Button, Dropdown, IconButton, Menu, useStyles2 } from '@grafana/ui';
+import { Button, Dropdown, Icon, IconButton, Menu, useStyles2 } from '@grafana/ui';
import { ExpressionQueryType, getExpressionIcon } from 'app/features/expressions/types';
interface AddDataItemMenuProps {
@@ -99,6 +99,12 @@ export const AddDataItemMenu = memo(
label={t('dashboard-scene.add-data-item-menu.add-from-saved-queries', 'From saved queries')}
icon="bookmark"
onClick={() => onAddFromSavedQueries(index)}
+ component={() => (
+
+
+
+ )}
+ className={styles.queryLibraryMenuItem}
/>
)}
{allowedTypes.includes('transform') && (
@@ -132,6 +138,14 @@ const getStyles = (theme: GrafanaTheme2) => ({
paddingLeft: 0,
fontFamily: theme.typography.fontFamilyMonospace,
}),
+ queryLibraryMenuItem: css({
+ flexDirection: 'row',
+ alignItems: 'center',
+ }),
+ badge: css({
+ display: 'flex',
+ alignItems: 'center',
+ }),
});
AddDataItemMenu.displayName = 'AddDataItemMenu';
diff --git a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryLibraryView.tsx b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryLibraryView.tsx
index 9eb92ef8879..52337561e6e 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryLibraryView.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelDataPane/QueryLibraryView.tsx
@@ -262,7 +262,13 @@ export const QueryLibraryView = forwardRef (
-