Adrian Orłów
--- a/src/components/Map/Drawer/BioEntityDrawer/OverlayData/GroupedOverlayAxes/GroupedOverlayAxes.components.tsx 0 → 100644
+++ b/src/components/Map/Drawer/BioEntityDrawer/OverlayData/GroupedOverlayAxes/GroupedOverlayAxes.components.tsx 0 → 100644
+
+export const GroupedOverlayAxes = ({ overlay, axes }: Props): JSX.Element | null => {
+  const { idObject, name } = overlay;
+  const overlayAxes = axes.filter(axis => axis.overlayId === idObject);
+
+  if (overlayAxes.length === SIZE_OF_EMPTY_ARRAY) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col gap-2 rounded-lg border border-divide p-4">
+      <div className="font-bold" data-testid="grouped-overlay-title">
+        {name}
+      </div>
+      <div className="my-1 h-[1px] w-full bg-divide" />
+      {getAxesSortedByValue(overlayAxes).map(axis => (
--- a/src/components/Map/Drawer/BioEntityDrawer/OverlayData/OverlayData.component.tsx
+++ b/src/components/Map/Drawer/BioEntityDrawer/OverlayData/OverlayData.component.tsx
-  if (axes.length === ZERO) {
+export const OverlayData = ({
+  isShowGroupedOverlays = false,
+  isShowOverlayBioEntityName = false,
+}: Props = {}): JSX.Element | null => {
+  const axes = useOverlaysAxes({ isShowOverlayBioEntityName });
+  const uniqueAxes = getUniqueAxes(axes);
+  const openedOverlays = useSelector(overlaysOpenedSelector);
+
+  if (uniqueAxes.length === ZERO) {
    return null;
  }

+  const overlaysAxesContent = (
+    <div className="flex flex-col gap-2 rounded-lg border border-divide p-4">
+      {getAxesSortedByValue(uniqueAxes).map(axis => (
--- a/src/components/Map/Drawer/BioEntityDrawer/OverlayData/utils/getAxesSortedByValue.ts 0 → 100644
+++ b/src/components/Map/Drawer/BioEntityDrawer/OverlayData/utils/getAxesSortedByValue.ts 0 → 100644
+import { ZERO } from '@/constants/common';
+import { OverlayDataAxis } from '../OverlayData.types';
+
+export const getAxesSortedByValue = (axes: OverlayDataAxis[]): OverlayDataAxis[] =>
+  axes.sort((a, b) => (b?.value || ZERO) - (a?.value || ZERO));