diff --git a/src/components/Map/MapViewer/utils/config/useOlMapPinsLayer.ts b/src/components/Map/MapViewer/utils/config/useOlMapPinsLayer.ts
index 275a28d3a7ccd2eb3c75dc1992983eb432713470..3244cf3a75e75a2a03fb23fc8dedb7eb43677bbf 100644
--- a/src/components/Map/MapViewer/utils/config/useOlMapPinsLayer.ts
+++ b/src/components/Map/MapViewer/utils/config/useOlMapPinsLayer.ts
@@ -1,9 +1,10 @@
 /* eslint-disable no-magic-numbers */
 import { PIN_SIZE } from '@/constants/canvas';
 import { allBioEntitesSelectorOfCurrentMap } from '@/redux/bioEntity/bioEntity.selectors';
-import { usePointToProjection } from '@/utils/map/usePointToProjection';
+import { BioEntity } from '@/types/models';
+import { UsePointToProjectionResult, usePointToProjection } from '@/utils/map/usePointToProjection';
 import { Feature } from 'ol';
-import { Point } from 'ol/geom';
+import { Point as OlPoint } from 'ol/geom';
 import BaseLayer from 'ol/layer/Base';
 import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
@@ -13,37 +14,48 @@ import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { getCanvasIcon } from './getCanvasIcon';
 
+const getPinFeature = (
+  { x, y, width, height, name }: BioEntity,
+  pointToProjection: UsePointToProjectionResult,
+): Feature => {
+  const point = {
+    x: x + width / 2,
+    y: y + height / 2,
+  };
+
+  return new Feature({
+    geometry: new OlPoint(pointToProjection(point)),
+    name,
+  });
+};
+
+const getPinStyle = ({ value, color }: { value: number; color: string }): Style =>
+  new Style({
+    image: new Icon({
+      displacement: [0, PIN_SIZE.height],
+      anchorXUnits: 'fraction',
+      anchorYUnits: 'pixels',
+      img: getCanvasIcon({
+        color,
+        value,
+      }),
+    }),
+  });
+
 export const useOlMapPinsLayer = (): BaseLayer => {
   const pointToProjection = usePointToProjection();
   const bioEntites = useSelector(allBioEntitesSelectorOfCurrentMap);
 
   const bioEntityFeatures = useMemo(
     () =>
-      bioEntites.map(({ bioEntity: { x, y, name, width, height } }, index) => {
-        const point = {
-          x: x + width / 2,
-          y: y + height / 2,
-        };
-
-        const feature = new Feature({
-          geometry: new Point(pointToProjection(point)),
-          name,
-        });
-
-        const style = new Style({
-          image: new Icon({
-            displacement: [0, PIN_SIZE.height],
-            anchorXUnits: 'fraction',
-            anchorYUnits: 'pixels',
-            img: getCanvasIcon({
-              color: '#106AD7',
-              value: index + 1,
-            }),
-          }),
+      bioEntites.map(({ bioEntity }, index) => {
+        const feature = getPinFeature(bioEntity, pointToProjection);
+        const style = getPinStyle({
+          color: '#106AD7',
+          value: index + 1,
         });
 
         feature.setStyle(style);
-
         return feature;
       }),
     [bioEntites, pointToProjection],
diff --git a/src/components/Map/MapViewer/utils/config/useOlMapTileLayer.ts b/src/components/Map/MapViewer/utils/config/useOlMapTileLayer.ts
index 83599a293933735e1319d4692bb23b03e22d6da4..b50d5c150dd2291feab71d5c5a5e0477f05e95aa 100644
--- a/src/components/Map/MapViewer/utils/config/useOlMapTileLayer.ts
+++ b/src/components/Map/MapViewer/utils/config/useOlMapTileLayer.ts
@@ -10,6 +10,8 @@ import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { getMapTileUrl } from './getMapTileUrl';
 
+// useOlMapTileLayer returns visual tile layer of the map
+// it makes it possible to view the map, scroll, zoom etc.
 export const useOlMapTileLayer = (): BaseLayer => {
   const mapSize = useSelector(mapDataSizeSelector);
   const currentBackgroundImagePath = useSelector(currentBackgroundImagePathSelector);
diff --git a/src/utils/map/usePointToProjection.ts b/src/utils/map/usePointToProjection.ts
index d0b0066b98d5f73abc92c4cca76dadf86e439ead..b6309fe612213490137220700c650021df38bfcb 100644
--- a/src/utils/map/usePointToProjection.ts
+++ b/src/utils/map/usePointToProjection.ts
@@ -7,7 +7,7 @@ import { useCallback } from 'react';
 import { useSelector } from 'react-redux';
 import { pointToLngLat } from './pointToLatLng';
 
-type UsePointToProjectionResult = (point: Point) => Coordinate;
+export type UsePointToProjectionResult = (point: Point) => Coordinate;
 
 type UsePointToProjection = () => UsePointToProjectionResult;