diff --git a/src/plugins/dashboard/public/dashboard_app/top_nav/add_new_panel/dashboard_panel_selection_flyout.tsx b/src/plugins/dashboard/public/dashboard_app/top_nav/add_new_panel/dashboard_panel_selection_flyout.tsx
index bb23fd6798b11..1fd99fed54c03 100644
--- a/src/plugins/dashboard/public/dashboard_app/top_nav/add_new_panel/dashboard_panel_selection_flyout.tsx
+++ b/src/plugins/dashboard/public/dashboard_app/top_nav/add_new_panel/dashboard_panel_selection_flyout.tsx
@@ -186,9 +186,13 @@ export const DashboardPanelSelectionListFlyout: React.FC<
               >
                 {panelsSearchResult?.some(({ isDisabled }) => !isDisabled) ? (
                   panelsSearchResult.map(
-                    ({ id, title, items, isDisabled, ['data-test-subj']: dataTestSubj }) =>
+                    ({ id, title, items, isDisabled, ['data-test-subj']: dataTestSubj, order }) =>
                       !isDisabled ? (
-                        <EuiFlexItem key={id} data-test-subj={dataTestSubj}>
+                        <EuiFlexItem
+                          key={id}
+                          data-test-subj={dataTestSubj}
+                          data-group-sort-order={order}
+                        >
                           <EuiTitle id={`${id}-group`} size="xxs">
                             {typeof title === 'string' ? <h3>{title}</h3> : title}
                           </EuiTitle>
diff --git a/src/plugins/embeddable/public/lib/embeddables/common/constants.ts b/src/plugins/embeddable/public/lib/embeddables/common/constants.ts
index 78228ec370a0e..3a47125a039c5 100644
--- a/src/plugins/embeddable/public/lib/embeddables/common/constants.ts
+++ b/src/plugins/embeddable/public/lib/embeddables/common/constants.ts
@@ -10,20 +10,13 @@ import { i18n } from '@kbn/i18n';
 import { UiActionsPresentableGroup } from '@kbn/ui-actions-plugin/public';
 
 export const COMMON_EMBEDDABLE_GROUPING: { [key: string]: UiActionsPresentableGroup<unknown> } = {
-  legacy: {
-    id: 'legacy',
-    getDisplayName: () =>
-      i18n.translate('embeddableApi.common.constants.grouping.legacy', {
-        defaultMessage: 'Legacy',
-      }),
-    order: -2,
-  },
   annotation: {
     id: 'annotation-and-navigation',
     getDisplayName: () =>
       i18n.translate('embeddableApi.common.constants.grouping.annotations', {
         defaultMessage: 'Annotations and Navigation',
       }),
+    order: 900, // This is the order of the group in the context menu
   },
   other: {
     id: 'other',
@@ -32,6 +25,14 @@ export const COMMON_EMBEDDABLE_GROUPING: { [key: string]: UiActionsPresentableGr
         defaultMessage: 'Other',
       }),
     getIconType: () => 'empty',
-    order: -1,
+    order: -1, // Given an item that doesn't specify a group is assigned zero, this forces other to come after all intentionally grouped section
+  },
+  legacy: {
+    id: 'legacy',
+    getDisplayName: () =>
+      i18n.translate('embeddableApi.common.constants.grouping.legacy', {
+        defaultMessage: 'Legacy',
+      }),
+    order: -2, // Given an item that doesn't specify a group is assigned zero, this forces it to the bottom of the list
   },
 };