diff --git a/src/assets/vectors/icons/location.svg b/src/assets/vectors/icons/location.svg
new file mode 100644
index 0000000000000000000000000000000000000000..2c376ca5855f1d020c8a339df78133a331162019
--- /dev/null
+++ b/src/assets/vectors/icons/location.svg
@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.9998 9.33073C11.4215 9.33073 9.33317 11.4191 9.33317 13.9974C9.33317 16.5757 11.4215 18.6641 13.9998 18.6641C16.5782 18.6641 18.6665 16.5757 18.6665 13.9974C18.6665 11.4191 16.5782 9.33073 13.9998 9.33073ZM24.4298 12.8307C24.1656 10.4649 23.1047 8.25919 21.4214 6.57587C19.738 4.89255 17.5324 3.83166 15.1665 3.5674V1.16406H12.8332V3.5674C10.4673 3.83166 8.26163 4.89255 6.57831 6.57587C4.895 8.25919 3.8341 10.4649 3.56984 12.8307H1.1665V15.1641H3.56984C3.8341 17.5299 4.895 19.7356 6.57831 21.4189C8.26163 23.1022 10.4673 24.1631 12.8332 24.4274V26.8307H15.1665V24.4274C17.5324 24.1631 19.738 23.1022 21.4214 21.4189C23.1047 19.7356 24.1656 17.5299 24.4298 15.1641H26.8332V12.8307H24.4298V12.8307ZM13.9998 22.1641C9.48484 22.1641 5.83317 18.5124 5.83317 13.9974C5.83317 9.4824 9.48484 5.83073 13.9998 5.83073C18.5148 5.83073 22.1665 9.4824 22.1665 13.9974C22.1665 18.5124 18.5148 22.1641 13.9998 22.1641Z" fill="#8E92A1"/>
+</svg>
diff --git a/src/assets/vectors/icons/magnifier-zoom-in.svg b/src/assets/vectors/icons/magnifier-zoom-in.svg
new file mode 100644
index 0000000000000000000000000000000000000000..10df8aa32643e8dc5d88d6d1d9920dff24afbbf4
--- /dev/null
+++ b/src/assets/vectors/icons/magnifier-zoom-in.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4_190)">
+<path d="M15 12H12V15H9V12H6V9H9V6H12V9H15V12Z" fill="#8E92A1"/>
+<path d="M23.5605 19.9395L19.5 15.879C20.4798 14.2558 20.9985 12.396 21 10.5C21 4.71 16.2885 0 10.5 0C4.7115 0 0 4.71 0 10.5C0 16.29 4.7115 21 10.5 21C12.3962 20.9994 14.2562 20.4808 15.879 19.5L19.9395 23.5605C20.0785 23.7003 20.2437 23.8112 20.4257 23.8869C20.6077 23.9626 20.8029 24.0016 21 24.0016C21.1971 24.0016 21.3923 23.9626 21.5743 23.8869C21.7563 23.8112 21.9215 23.7003 22.0605 23.5605L23.5605 22.0605C23.6999 21.9213 23.8105 21.756 23.886 21.574C23.9615 21.3921 24.0003 21.197 24.0003 21C24.0003 20.803 23.9615 20.6079 23.886 20.426C23.8105 20.244 23.6999 20.0787 23.5605 19.9395V19.9395ZM10.5 18C8.51068 17.9998 6.60291 17.2094 5.19639 15.8026C3.78987 14.3957 2.9998 12.4878 3 10.4985C3.0002 8.50918 3.79064 6.60141 5.19745 5.19489C6.60425 3.78837 8.51218 2.9983 10.5015 2.9985C12.4908 2.9987 14.3986 3.78915 15.8051 5.19595C17.2116 6.60275 18.0017 8.51068 18.0015 10.5C18.0013 12.4893 17.2109 14.3971 15.8041 15.8036C14.3972 17.2101 12.4893 18.0002 10.5 18V18Z" fill="#8E92A1"/>
+</g>
+<defs>
+<clipPath id="clip0_4_190">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/vectors/icons/magnifier-zoom-out.svg b/src/assets/vectors/icons/magnifier-zoom-out.svg
new file mode 100644
index 0000000000000000000000000000000000000000..939f1a35ba43bcf64fa5659aa0b7cacc649e06bb
--- /dev/null
+++ b/src/assets/vectors/icons/magnifier-zoom-out.svg
@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4_194)">
+<path d="M6 9H15V12H6V9Z" fill="#8E92A1"/>
+<path d="M23.5605 19.9395L19.5 15.879C20.4798 14.2558 20.9985 12.396 21 10.5C21 4.71 16.2885 0 10.5 0C4.7115 0 0 4.71 0 10.5C0 16.29 4.7115 21 10.5 21C12.3962 20.9994 14.2562 20.4808 15.879 19.5L19.9395 23.5605C20.0785 23.7003 20.2437 23.8112 20.4257 23.8869C20.6077 23.9626 20.8029 24.0016 21 24.0016C21.1971 24.0016 21.3923 23.9626 21.5743 23.8869C21.7563 23.8112 21.9215 23.7003 22.0605 23.5605L23.5605 22.0605C23.6999 21.9213 23.8105 21.756 23.886 21.574C23.9615 21.3921 24.0003 21.197 24.0003 21C24.0003 20.803 23.9615 20.6079 23.886 20.426C23.8105 20.244 23.6999 20.0787 23.5605 19.9395V19.9395ZM10.5 18C8.51068 17.9998 6.60291 17.2094 5.19639 15.8026C3.78987 14.3957 2.9998 12.4878 3 10.4985C3.0002 8.50918 3.79064 6.60141 5.19745 5.19489C6.60425 3.78837 8.51218 2.9983 10.5015 2.9985C12.4908 2.9987 14.3986 3.78915 15.8051 5.19595C17.2116 6.60275 18.0017 8.51068 18.0015 10.5C18.0013 12.4893 17.2109 14.3971 15.8041 15.8036C14.3972 17.2101 12.4893 18.0002 10.5 18V18Z" fill="#8E92A1"/>
+</g>
+<defs>
+<clipPath id="clip0_4_194">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/components/Map/Map.component.tsx b/src/components/Map/Map.component.tsx
index ea5a18e2ef3a95b5001d4873022ee8c220ae829f..36ac1a1f14fe6f6f65ec250f55ee29c396c69128 100644
--- a/src/components/Map/Map.component.tsx
+++ b/src/components/Map/Map.component.tsx
@@ -1,5 +1,6 @@
 import { Drawer } from '@/components/Map/Drawer';
 import { Legend } from '@/components/Map/Legend';
+import { MapAdditionalActions } from './MapAdditionalActions';
 import { MapAdditionalOptions } from './MapAdditionalOptions';
 import { MapViewer } from './MapViewer/MapViewer.component';
 
@@ -12,5 +13,6 @@ export const Map = (): JSX.Element => (
     <Drawer />
     <MapViewer />
     <Legend />
+    <MapAdditionalActions />
   </div>
 );
diff --git a/src/components/Map/MapAdditionalActions/MapAdditionalActions.component.test.tsx b/src/components/Map/MapAdditionalActions/MapAdditionalActions.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..226bd904950ae5d936b46ff2e47634ecf97ceae6
--- /dev/null
+++ b/src/components/Map/MapAdditionalActions/MapAdditionalActions.component.test.tsx
@@ -0,0 +1,83 @@
+import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
+import { AppDispatch, RootState } from '@/redux/store';
+import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
+import { InitialStoreState } from '@/utils/testing/getReduxWrapperWithStore';
+import { render, screen } from '@testing-library/react';
+import { MockStoreEnhanced } from 'redux-mock-store';
+import { MapAdditionalActions } from './MapAdditionalActions.component';
+
+const renderComponent = (
+  initialStore?: InitialStoreState,
+): { store: MockStoreEnhanced<Partial<RootState>, AppDispatch> } => {
+  const { Wrapper, store } = getReduxStoreWithActionsListener(initialStore);
+  return (
+    render(
+      <Wrapper>
+        <MapAdditionalActions />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
+describe('MapAdditionalActions - component', () => {
+  describe('when always', () => {
+    beforeEach(() => {
+      renderComponent();
+    });
+
+    it('should render zoom in button', () => {
+      const image = screen.getByAltText('zoom in button icon');
+      const button = image.closest('button');
+      expect(button).toBeInTheDocument();
+    });
+
+    it('should render zoom out button', () => {
+      const image = screen.getByAltText('zoom out button icon');
+      const button = image.closest('button');
+      expect(button).toBeInTheDocument();
+    });
+
+    it('should render location button', () => {
+      const image = screen.getByAltText('location button icon');
+      const button = image.closest('button');
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe('when clicked on zoom in button', () => {
+    it('should dispatch varyPositionZoom action with valid delta', () => {
+      const { store } = renderComponent();
+      const image = screen.getByAltText('zoom in button icon');
+      const button = image.closest('button');
+      button!.click();
+
+      const actions = store.getActions();
+      expect(actions[FIRST_ARRAY_ELEMENT]).toStrictEqual({
+        payload: { delta: 1 },
+        type: 'map/varyPositionZoom',
+      });
+    });
+  });
+
+  describe('when clicked on zoom in button', () => {
+    it('should dispatch varyPositionZoom action with valid delta', () => {
+      const { store } = renderComponent();
+      const image = screen.getByAltText('zoom out button icon');
+      const button = image.closest('button');
+      button!.click();
+
+      const actions = store.getActions();
+      expect(actions[FIRST_ARRAY_ELEMENT]).toStrictEqual({
+        payload: { delta: -1 },
+        type: 'map/varyPositionZoom',
+      });
+    });
+  });
+
+  describe.skip('when clicked on location button', () => {
+    // TODO: implelemnt test
+  });
+});
diff --git a/src/components/Map/MapAdditionalActions/MapAdditionalActions.component.tsx b/src/components/Map/MapAdditionalActions/MapAdditionalActions.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fb6dc5fb83c89bc5f8771bc9dd13d9eb8fda7538
--- /dev/null
+++ b/src/components/Map/MapAdditionalActions/MapAdditionalActions.component.tsx
@@ -0,0 +1,44 @@
+import locationIcon from '@/assets/vectors/icons/location.svg';
+import magnifierZoomInIcon from '@/assets/vectors/icons/magnifier-zoom-in.svg';
+import magnifierZoomOutIcon from '@/assets/vectors/icons/magnifier-zoom-out.svg';
+import Image from 'next/image';
+import { twMerge } from 'tailwind-merge';
+import { useAddtionalActions } from './utils/useAdditionalActions';
+
+export const MapAdditionalActions = (): JSX.Element => {
+  const { zoomIn, zoomOut, zoomInToBioEntities } = useAddtionalActions();
+
+  return (
+    <div
+      className={twMerge(
+        'absolute bottom-6 right-6 z-10 flex flex-col gap-4',
+        'drop-shadow-primary',
+      )}
+    >
+      <button
+        type="button"
+        className="flex h-12 w-12 items-center justify-center rounded-full bg-white"
+        onClick={zoomInToBioEntities}
+      >
+        <Image src={locationIcon} alt="location button icon" height={28} width={28} />
+      </button>
+      <div className="flex h-auto w-12 flex-col items-center justify-center rounded-full bg-white py-2">
+        <button
+          type="button"
+          className="flex h-12 w-12 items-center justify-center"
+          onClick={zoomIn}
+        >
+          <Image src={magnifierZoomInIcon} alt="zoom in button icon" height={24} width={24} />
+        </button>
+        <div className="h-px w-12 bg-[#F1F1F1]" />
+        <button
+          type="button"
+          className="flex h-12 w-12 items-center justify-center"
+          onClick={zoomOut}
+        >
+          <Image src={magnifierZoomOutIcon} alt="zoom out button icon" height={24} width={24} />
+        </button>
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/Map/MapAdditionalActions/MappAdditionalActions.constants.ts b/src/components/Map/MapAdditionalActions/MappAdditionalActions.constants.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0803794471425c623acb0dd038ef4f4389e83898
--- /dev/null
+++ b/src/components/Map/MapAdditionalActions/MappAdditionalActions.constants.ts
@@ -0,0 +1,3 @@
+export const MAP_ZOOM_IN_DELTA = 1;
+
+export const MAP_ZOOM_OUT_DELTA = -1;
diff --git a/src/components/Map/MapAdditionalActions/index.ts b/src/components/Map/MapAdditionalActions/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1b2260185302e8c2d4376e0390693594ffd951b0
--- /dev/null
+++ b/src/components/Map/MapAdditionalActions/index.ts
@@ -0,0 +1 @@
+export { MapAdditionalActions } from './MapAdditionalActions.component';
diff --git a/src/components/Map/MapAdditionalActions/utils/useAdditionalActions.test.ts b/src/components/Map/MapAdditionalActions/utils/useAdditionalActions.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..34986a2ecc9a1014912024d286fabd40f7def5ee
--- /dev/null
+++ b/src/components/Map/MapAdditionalActions/utils/useAdditionalActions.test.ts
@@ -0,0 +1,52 @@
+import { FIRST_ARRAY_ELEMENT } from '@/constants/common';
+import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
+import { renderHook } from '@testing-library/react';
+import { useAddtionalActions } from './useAdditionalActions';
+
+describe('useAddtionalActions - hook', () => {
+  describe('on zoomIn', () => {
+    it('should dispatch varyPositionZoom action with valid delta', () => {
+      const { Wrapper, store } = getReduxStoreWithActionsListener();
+      const {
+        result: {
+          current: { zoomIn },
+        },
+      } = renderHook(() => useAddtionalActions(), {
+        wrapper: Wrapper,
+      });
+
+      zoomIn();
+
+      const actions = store.getActions();
+      expect(actions[FIRST_ARRAY_ELEMENT]).toStrictEqual({
+        payload: { delta: 1 },
+        type: 'map/varyPositionZoom',
+      });
+    });
+  });
+
+  describe('on zoomOut', () => {
+    it('should dispatch varyPositionZoom action with valid delta', () => {
+      const { Wrapper, store } = getReduxStoreWithActionsListener();
+      const {
+        result: {
+          current: { zoomOut },
+        },
+      } = renderHook(() => useAddtionalActions(), {
+        wrapper: Wrapper,
+      });
+
+      zoomOut();
+
+      const actions = store.getActions();
+      expect(actions[FIRST_ARRAY_ELEMENT]).toStrictEqual({
+        payload: { delta: -1 },
+        type: 'map/varyPositionZoom',
+      });
+    });
+  });
+
+  describe('on zoomInToBioEntities', () => {
+    // TODO: implelemnt test
+  });
+});
diff --git a/src/components/Map/MapAdditionalActions/utils/useAdditionalActions.ts b/src/components/Map/MapAdditionalActions/utils/useAdditionalActions.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ef7519f99173920a36a1ac4371c15d027c4931ee
--- /dev/null
+++ b/src/components/Map/MapAdditionalActions/utils/useAdditionalActions.ts
@@ -0,0 +1,27 @@
+import { varyPositionZoom } from '@/redux/map/map.slice';
+import { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { MAP_ZOOM_IN_DELTA, MAP_ZOOM_OUT_DELTA } from '../MappAdditionalActions.constants';
+
+interface UseAddtionalActionsResult {
+  zoomIn(): void;
+  zoomOut(): void;
+  zoomInToBioEntities(): void;
+}
+
+export const useAddtionalActions = (): UseAddtionalActionsResult => {
+  const dispatch = useDispatch();
+
+  const varyZoomByDelta = useCallback(
+    (delta: number) => {
+      dispatch(varyPositionZoom({ delta }));
+    },
+    [dispatch],
+  );
+
+  return {
+    zoomIn: () => varyZoomByDelta(MAP_ZOOM_IN_DELTA),
+    zoomOut: () => varyZoomByDelta(MAP_ZOOM_OUT_DELTA),
+    zoomInToBioEntities: (): void => {},
+  };
+};
diff --git a/src/components/Map/MapViewer/utils/config/pinsLayer/useOlMapPinsLayer.ts b/src/components/Map/MapViewer/utils/config/pinsLayer/useOlMapPinsLayer.ts
index 0c2079d04320fc6daf02b194402aa5b2bbddb32b..ceecf01f0ad220d2637283d80ae564b650f13f53 100644
--- a/src/components/Map/MapViewer/utils/config/pinsLayer/useOlMapPinsLayer.ts
+++ b/src/components/Map/MapViewer/utils/config/pinsLayer/useOlMapPinsLayer.ts
@@ -3,14 +3,15 @@ import { searchedBioEntitesSelectorOfCurrentMap } from '@/redux/bioEntity/bioEnt
 import { searchedChemicalsBioEntitesOfCurrentMapSelector } from '@/redux/chemicals/chemicals.selectors';
 import { searchedDrugsBioEntitesOfCurrentMapSelector } from '@/redux/drugs/drugs.selectors';
 import { usePointToProjection } from '@/utils/map/usePointToProjection';
-import BaseLayer from 'ol/layer/Base';
+import Feature from 'ol/Feature';
+import { Geometry } from 'ol/geom';
 import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 import { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import { getBioEntitiesFeatures } from './getBioEntitiesFeatures';
 
-export const useOlMapPinsLayer = (): BaseLayer => {
+export const useOlMapPinsLayer = (): VectorLayer<VectorSource<Feature<Geometry>>> => {
   const pointToProjection = usePointToProjection();
   const contentBioEntites = useSelector(searchedBioEntitesSelectorOfCurrentMap);
   const chemicalsBioEntities = useSelector(searchedChemicalsBioEntitesOfCurrentMapSelector);
diff --git a/src/components/Map/MapViewer/utils/config/useOlMapLayers.ts b/src/components/Map/MapViewer/utils/config/useOlMapLayers.ts
index b4db459df1c08630eae039f9f5539855cf4964ac..070d37d83be8bcb88a3ad8e509daad18127b10db 100644
--- a/src/components/Map/MapViewer/utils/config/useOlMapLayers.ts
+++ b/src/components/Map/MapViewer/utils/config/useOlMapLayers.ts
@@ -1,10 +1,10 @@
 /* eslint-disable no-magic-numbers */
 import { useEffect } from 'react';
 import { MapConfig, MapInstance } from '../../MapViewer.types';
+import { useOlMapOverlaysLayer } from './overlaysLayer/useOlMapOverlaysLayer';
 import { useOlMapPinsLayer } from './pinsLayer/useOlMapPinsLayer';
 import { useOlMapReactionsLayer } from './reactionsLayer/useOlMapReactionsLayer';
 import { useOlMapTileLayer } from './useOlMapTileLayer';
-import { useOlMapOverlaysLayer } from './overlaysLayer/useOlMapOverlaysLayer';
 
 interface UseOlMapLayersInput {
   mapInstance: MapInstance;
diff --git a/src/redux/map/map.constants.ts b/src/redux/map/map.constants.ts
index 5a4cd08479371a9042648c4ff07fe5bb9c279e98..27a63ef2a593b6e1fd2f031870ae4b489ba6ba25 100644
--- a/src/redux/map/map.constants.ts
+++ b/src/redux/map/map.constants.ts
@@ -6,7 +6,7 @@ import {
   DEFAULT_TILE_SIZE,
 } from '@/constants/map';
 import { Point } from '@/types/map';
-import { MapData, OppenedMap } from './map.types';
+import { MapData, MapState, OppenedMap } from './map.types';
 
 export const MAIN_MAP = 'Main map';
 
@@ -47,3 +47,10 @@ export const OPENED_MAPS_INITIAL_STATE: OppenedMap[] = [
 ];
 
 export const MIDDLEWARE_ALLOWED_ACTIONS: string[] = ['map/setMapData'];
+
+export const MAP_INITIAL_STATE: MapState = {
+  data: MAP_DATA_INITIAL_STATE,
+  loading: 'idle',
+  error: { name: '', message: '' },
+  openedMaps: OPENED_MAPS_INITIAL_STATE,
+};
diff --git a/src/redux/map/map.reducers.test.ts b/src/redux/map/map.reducers.test.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d711a41b2833a441d78de8f87362370d1797ef28
--- /dev/null
+++ b/src/redux/map/map.reducers.test.ts
@@ -0,0 +1,66 @@
+import { DEFAULT_CENTER_POINT, DEFAULT_TILE_SIZE } from '@/constants/map';
+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import { MAP_DATA_INITIAL_STATE, MAP_INITIAL_STATE } from './map.constants';
+import { varyPositionZoom } from './map.slice';
+
+describe('map reducers', () => {
+  describe('varyPositionZoomReducer', () => {
+    const baseMapSize = {
+      width: 0,
+      height: 0,
+      tileSize: DEFAULT_TILE_SIZE,
+    };
+
+    const cases: [
+      {
+        minZoom: number;
+        maxZoom: number;
+        currentZ: number;
+      },
+      { delta: number },
+      { finalZ: number },
+    ][] = [
+      [{ minZoom: 1, maxZoom: 1, currentZ: 1 }, { delta: 1 }, { finalZ: 1 }], // exeeds the interval
+      [{ minZoom: 1, maxZoom: 1, currentZ: 1 }, { delta: -1 }, { finalZ: 1 }], // deceeds the interval
+      [{ minZoom: 1, maxZoom: 2, currentZ: 1 }, { delta: 1 }, { finalZ: 2 }], // inside the interval (with positive delta)
+      [{ minZoom: 0, maxZoom: 1, currentZ: 1 }, { delta: -1 }, { finalZ: 0 }], // inside the interval (with negative delta)
+    ];
+
+    it.each(cases)(
+      'should set valid final z position',
+      ({ minZoom, maxZoom, currentZ }, { delta }, { finalZ }) => {
+        const { store } = getReduxWrapperWithStore({
+          map: {
+            ...MAP_INITIAL_STATE,
+            data: {
+              ...MAP_DATA_INITIAL_STATE,
+              size: {
+                ...baseMapSize,
+                minZoom,
+                maxZoom,
+              },
+              position: {
+                initial: {
+                  ...DEFAULT_CENTER_POINT,
+                  z: currentZ,
+                },
+                last: {
+                  ...DEFAULT_CENTER_POINT,
+                  z: currentZ,
+                },
+              },
+            },
+          },
+        });
+
+        store.dispatch(varyPositionZoom({ delta }));
+        const newState = store.getState();
+        const newInitialZ = newState.map.data.position.initial.z;
+        const newLastZ = newState.map.data.position.last.z;
+
+        expect(newInitialZ).toEqual(finalZ);
+        expect(newLastZ).toEqual(finalZ);
+      },
+    );
+  });
+});
diff --git a/src/redux/map/map.reducers.ts b/src/redux/map/map.reducers.ts
index b17f1432b0cad6c95e8877e6970d2c6de5d501fa..eef6f9324c56ef85ab70d4c61ccf5f9320f82fd6 100644
--- a/src/redux/map/map.reducers.ts
+++ b/src/redux/map/map.reducers.ts
@@ -1,4 +1,5 @@
 import { ZERO } from '@/constants/common';
+import { DEFAULT_ZOOM } from '@/constants/map';
 import { ActionReducerMapBuilder } from '@reduxjs/toolkit';
 import { getPointMerged } from '../../utils/object/getPointMerged';
 import { MAIN_MAP } from './map.constants';
@@ -14,6 +15,7 @@ import {
   OpenMapAndSetActiveAction,
   SetActiveMapAction,
   SetBackgroundAction,
+  SetLastPositionZoomAction,
   SetMapDataAction,
   SetMapPositionDataAction,
 } from './map.types';
@@ -40,6 +42,20 @@ export const setMapPositionReducer = (state: MapState, action: SetMapPositionDat
   };
 };
 
+export const varyPositionZoomReducer = (
+  state: MapState,
+  action: SetLastPositionZoomAction,
+): void => {
+  const { minZoom, maxZoom } = state.data.size;
+  const { delta } = action.payload;
+  const currentZ = state.data.position.last.z || DEFAULT_ZOOM;
+  const newZ = currentZ + delta;
+  const newZLimited = Math.min(Math.max(newZ, minZoom), maxZoom);
+
+  state.data.position.last.z = newZLimited;
+  state.data.position.initial.z = newZLimited;
+};
+
 const updateLastPositionOfCurrentlyActiveMap = (state: MapState): void => {
   const currentMapId = state.data.modelId;
   const currentOpenedMap = state.openedMaps.find(openedMap => openedMap.modelId === currentMapId);
diff --git a/src/redux/map/map.slice.ts b/src/redux/map/map.slice.ts
index 73cbb92f2e7887f7674dd7260e8e895b45de24bb..8fc687b9fb29301fc18cc15579ca40b6caef893f 100644
--- a/src/redux/map/map.slice.ts
+++ b/src/redux/map/map.slice.ts
@@ -1,30 +1,23 @@
 import { createSlice } from '@reduxjs/toolkit';
-import { MAP_DATA_INITIAL_STATE, OPENED_MAPS_INITIAL_STATE } from './map.constants';
+import { MAP_INITIAL_STATE } from './map.constants';
 import {
   closeMapAndSetMainMapActiveReducer,
   closeMapReducer,
+  initMapBackgroundsReducer,
+  initMapPositionReducers,
+  initMapSizeAndModelIdReducer,
+  initOpenedMapsReducer,
   openMapAndSetActiveReducer,
   setActiveMapReducer,
+  setMapBackgroundReducer,
   setMapDataReducer,
-  initMapPositionReducers,
   setMapPositionReducer,
-  initOpenedMapsReducer,
-  initMapSizeAndModelIdReducer,
-  initMapBackgroundsReducer,
-  setMapBackgroundReducer,
+  varyPositionZoomReducer,
 } from './map.reducers';
-import { MapState } from './map.types';
-
-const initialState: MapState = {
-  data: MAP_DATA_INITIAL_STATE,
-  loading: 'idle',
-  error: { name: '', message: '' },
-  openedMaps: OPENED_MAPS_INITIAL_STATE,
-};
 
 const mapSlice = createSlice({
   name: 'map',
-  initialState,
+  initialState: MAP_INITIAL_STATE,
   reducers: {
     setMapData: setMapDataReducer,
     setActiveMap: setActiveMapReducer,
@@ -32,6 +25,7 @@ const mapSlice = createSlice({
     closeMap: closeMapReducer,
     closeMapAndSetMainMapActive: closeMapAndSetMainMapActiveReducer,
     setMapPosition: setMapPositionReducer,
+    varyPositionZoom: varyPositionZoomReducer,
     setMapBackground: setMapBackgroundReducer,
   },
   extraReducers: builder => {
@@ -50,6 +44,7 @@ export const {
   closeMapAndSetMainMapActive,
   setMapPosition,
   setMapBackground,
+  varyPositionZoom,
 } = mapSlice.actions;
 
 export default mapSlice.reducer;
diff --git a/src/redux/map/map.types.ts b/src/redux/map/map.types.ts
index 16f5e54210814eca8c851769a049622b2b4057c1..3d15719aa783b34b5796321c166e30c02a2d9eb6 100644
--- a/src/redux/map/map.types.ts
+++ b/src/redux/map/map.types.ts
@@ -82,6 +82,12 @@ export type GetUpdatedMapDataResult = Pick<
 
 export type SetMapPositionDataAction = PayloadAction<Point>;
 
+export type SetLastPositionZoomActionPayload = {
+  delta: number;
+};
+
+export type SetLastPositionZoomAction = PayloadAction<SetLastPositionZoomActionPayload>;
+
 export type InitMapDataActionPayload = {
   data: GetUpdatedMapDataResult | object;
   openedMaps: OppenedMap[];
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 75ce9dc54480bc8bb8e9b0da255d2e772bec2ac2..80376a72e62b6e23b6a7a7d560dee0650e4d5d92 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -36,6 +36,9 @@ const config: Config = {
       boxShadow: {
         primary: '4px 8px 32px 0px rgba(0, 0, 0, 0.12)',
       },
+      dropShadow: {
+        primary: '0px 4px 24px rgba(0, 0, 0, 0.08)',
+      },
     },
     fontFamily: {
       manrope: ['var(--font-manrope)'],