diff --git a/package-lock.json b/package-lock.json
index fb3ac0a3f0714e4b416b9e53eea2ccebf5e172f4..f5d700154ac7b2e64101b071c444d44034bbfeba 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
         "autoprefixer": "10.4.15",
         "axios": "^1.5.1",
         "axios-hooks": "^5.0.0",
+        "downshift": "^8.2.3",
         "eslint-config-next": "13.4.19",
         "next": "13.4.19",
         "ol": "^8.1.0",
@@ -27,7 +28,6 @@
         "react-accessible-accordion": "^5.0.0",
         "react-dom": "18.2.0",
         "react-redux": "^8.1.2",
-        "redux-thunk": "^2.4.2",
         "tailwind-merge": "^1.14.0",
         "tailwindcss": "3.3.3",
         "ts-deepmerge": "^6.2.0",
@@ -72,6 +72,7 @@
         "prettier-2": "npm:prettier@^2",
         "prettier-plugin-tailwindcss": "^0.5.6",
         "redux-mock-store": "^1.5.4",
+        "redux-thunk": "^2.4.2",
         "typescript": "^5.2.2",
         "zod-fixture": "^2.5.0"
       }
@@ -3856,6 +3857,11 @@
         "dot-prop": "^5.1.0"
       }
     },
+    "node_modules/compute-scroll-into-view": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz",
+      "integrity": "sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg=="
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4777,6 +4783,26 @@
         "node": ">=8"
       }
     },
+    "node_modules/downshift": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/downshift/-/downshift-8.2.3.tgz",
+      "integrity": "sha512-1HkvqaMTZpk24aqnXaRDnT+N5JCbpFpW+dCogB11+x+FCtfkFX0MbAO4vr/JdXi1VYQF174KjNUveBXqaXTPtg==",
+      "dependencies": {
+        "@babel/runtime": "^7.22.15",
+        "compute-scroll-into-view": "^3.0.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.2.0",
+        "tslib": "^2.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.12.0"
+      }
+    },
+    "node_modules/downshift/node_modules/react-is": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
+      "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+    },
     "node_modules/drange": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/drange/-/drange-1.1.1.tgz",
diff --git a/package.json b/package.json
index 8b0606764da102e204eae684b9fa69b913a18c11..6d2d85292d9f9ee9d0bb0f7bcd975fbddfcda2e2 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "autoprefixer": "10.4.15",
     "axios": "^1.5.1",
     "axios-hooks": "^5.0.0",
+    "downshift": "^8.2.3",
     "eslint-config-next": "13.4.19",
     "next": "13.4.19",
     "ol": "^8.1.0",
@@ -41,7 +42,6 @@
     "react-accessible-accordion": "^5.0.0",
     "react-dom": "18.2.0",
     "react-redux": "^8.1.2",
-    "redux-thunk": "^2.4.2",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "3.3.3",
     "ts-deepmerge": "^6.2.0",
@@ -86,6 +86,7 @@
     "prettier-2": "npm:prettier@^2",
     "prettier-plugin-tailwindcss": "^0.5.6",
     "redux-mock-store": "^1.5.4",
+    "redux-thunk": "^2.4.2",
     "typescript": "^5.2.2",
     "zod-fixture": "^2.5.0"
   },
diff --git a/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx b/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx
index 0bc4e1d80759f06d92e40b57f2cd8bded63ac632..06d7c9f013f641a8f8d937ba25983f8d4efa612b 100644
--- a/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx
+++ b/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx
@@ -31,12 +31,12 @@ export const MapNavigation = (): JSX.Element => {
   };
 
   return (
-    <div className="flex h-10 w-full flex-row flex-nowrap justify-start overflow-y-auto bg-white-pearl shadow-map-navigation-bar">
+    <div className="flex h-10 w-full flex-row flex-nowrap justify-start overflow-y-auto bg-white-pearl text-xs  shadow-primary">
       {openedMaps.map(map => (
         <Button
           key={map.modelId}
           className={twMerge(
-            'h-10 whitespace-nowrap	',
+            'h-10 whitespace-nowrap',
             isActive(map.modelId) ? 'bg-[#EBF4FF]' : 'font-normal',
           )}
           variantStyles={isActive(map.modelId) ? 'secondary' : 'ghost'}
diff --git a/src/components/Map/Map.component.tsx b/src/components/Map/Map.component.tsx
index 3782c938151684b37d3cde0ea6ed248902188898..27cfcff4ab4b05cde8055df31095e7deddc31739 100644
--- a/src/components/Map/Map.component.tsx
+++ b/src/components/Map/Map.component.tsx
@@ -1,8 +1,10 @@
 import { Drawer } from '@/components/Map/Drawer';
 import { MapViewer } from './MapViewer/MapViewer.component';
+import { MapAdditionalOptions } from './MapAdditionalOptions';
 
 export const Map = (): JSX.Element => (
   <div className="relative z-0 h-screen w-full bg-black" data-testid="map-container">
+    <MapAdditionalOptions />
     <Drawer />
     <MapViewer />
   </div>
diff --git a/src/components/Map/MapAdditionalOptions/BackgroundsSelector/BackgroundsSelector.component.test.tsx b/src/components/Map/MapAdditionalOptions/BackgroundsSelector/BackgroundsSelector.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8aaf2bd11f3433c42bd3e9bdef76aa3101c4008d
--- /dev/null
+++ b/src/components/Map/MapAdditionalOptions/BackgroundsSelector/BackgroundsSelector.component.test.tsx
@@ -0,0 +1,104 @@
+/* eslint-disable no-magic-numbers */
+import { StoreType } from '@/redux/store';
+import { render, screen } from '@testing-library/react';
+import { act } from 'react-dom/test-utils';
+import { initialMapDataFixture, initialMapStateFixture } from '@/redux/map/map.fixtures';
+import {
+  InitialStoreState,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import {
+  BACKGROUNDS_MOCK,
+  BACKGROUND_INITIAL_STATE_MOCK,
+} from '@/redux/backgrounds/background.mock';
+import { BackgroundSelector } from './BackgroundsSelector.component';
+
+const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
+  const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+  return (
+    render(
+      <Wrapper>
+        <BackgroundSelector />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
+describe('BackgroundSelector - component', () => {
+  it('should initialy display default value', () => {
+    renderComponent();
+
+    const buttonName = screen.getByTestId('background-dropdown-button-name');
+
+    expect(buttonName.textContent).toBe('Background');
+  });
+
+  it("should display selected value name when it's not main background", async () => {
+    renderComponent({
+      map: initialMapStateFixture,
+      backgrounds: { ...BACKGROUND_INITIAL_STATE_MOCK, data: BACKGROUNDS_MOCK },
+    });
+
+    const buttonName = screen.getByTestId('background-dropdown-button-name');
+    await act(() => {
+      buttonName.click();
+    });
+    expect(buttonName.textContent).toBe('Background');
+
+    const backgroundButton = screen.getByText('Network');
+    await act(() => {
+      backgroundButton.click();
+    });
+
+    expect(buttonName.textContent).toBe('Network');
+  });
+
+  it('should change redux map state on selecting background', async () => {
+    const { store } = renderComponent({
+      map: initialMapStateFixture,
+      backgrounds: { ...BACKGROUND_INITIAL_STATE_MOCK, data: BACKGROUNDS_MOCK },
+    });
+    expect(store.getState().map.data.modelId).toBe(0);
+
+    const buttonName = screen.getByTestId('background-dropdown-button-name');
+    await act(() => {
+      buttonName.click();
+    });
+
+    const backgroundButton = screen.getByText('Network');
+    await act(() => {
+      backgroundButton.click();
+    });
+
+    expect(store.getState().map.data.backgroundId).toBe(14);
+  });
+
+  describe('query params', () => {
+    it('should display default value when main background id is in query params', async () => {
+      await renderComponent({
+        map: { ...initialMapStateFixture, data: { ...initialMapDataFixture, backgroundId: 13 } },
+        backgrounds: { ...BACKGROUND_INITIAL_STATE_MOCK, data: BACKGROUNDS_MOCK },
+      });
+
+      const buttonName = screen.getByTestId('background-dropdown-button-name');
+      expect(buttonName.textContent).toBe('Background');
+    });
+    it('should display correct background when background id is in query params', async () => {
+      await renderComponent({
+        map: { ...initialMapStateFixture, data: { ...initialMapDataFixture, backgroundId: 15 } },
+        backgrounds: { ...BACKGROUND_INITIAL_STATE_MOCK, data: BACKGROUNDS_MOCK },
+      });
+
+      const buttonName = screen.getByTestId('background-dropdown-button-name');
+      expect(buttonName.textContent).toBe('Empty');
+    });
+    it.skip('should set backgroundid in query on selecting background', () => {
+      // TODO e2e
+      expect(true).toBe(false);
+    });
+  });
+});
diff --git a/src/components/Map/MapAdditionalOptions/BackgroundsSelector/BackgroundsSelector.component.tsx b/src/components/Map/MapAdditionalOptions/BackgroundsSelector/BackgroundsSelector.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ca0dd73392f972a5285211dba89fb71d1a87a102
--- /dev/null
+++ b/src/components/Map/MapAdditionalOptions/BackgroundsSelector/BackgroundsSelector.component.tsx
@@ -0,0 +1,86 @@
+import { useSelect } from 'downshift';
+import {
+  backgroundsDataSelector,
+  currentBackgroundSelector,
+  mainBackgroundIdSelector,
+} from '@/redux/backgrounds/background.selectors';
+import { useAppSelector } from '@/redux/hooks/useAppSelector';
+import { twMerge } from 'tailwind-merge';
+import { Icon } from '@/shared/Icon';
+import { MapBackground } from '@/types/models';
+import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
+import { setMapBackground } from '@/redux/map/map.slice';
+
+const DEFAULT_TOGGLE_BUTTON_TEXT = 'Background';
+
+export const BackgroundSelector = (): JSX.Element => {
+  const selectedBackground = useAppSelector(currentBackgroundSelector);
+  const dispatch = useAppDispatch();
+  const backgrounds = useAppSelector(backgroundsDataSelector);
+  const mainBackgroundId = useAppSelector(mainBackgroundIdSelector);
+
+  const onItemSelect = (background: MapBackground | undefined | null): void => {
+    if (background) {
+      dispatch(setMapBackground(background.id));
+    }
+  };
+
+  const { isOpen, getToggleButtonProps, getMenuProps, highlightedIndex, getItemProps } = useSelect({
+    items: backgrounds || [],
+    selectedItem: selectedBackground,
+    onSelectedItemChange: ({ selectedItem: newSelectedItem }) => onItemSelect(newSelectedItem),
+  });
+
+  const getToggleButtonName = (): string => {
+    const isSelectedBackgroundMainBackground = selectedBackground?.id === mainBackgroundId;
+    if (!selectedBackground || isSelectedBackgroundMainBackground) {
+      return DEFAULT_TOGGLE_BUTTON_TEXT;
+    }
+    return selectedBackground.name;
+  };
+
+  return (
+    <div
+      data-testid="background-selector"
+      className={twMerge('rounded-t bg-white text-xs shadow-primary', !isOpen && 'rounded-b')}
+    >
+      <div className={twMerge('flex w-72 flex-col rounded-t py-2 pl-4 pr-3')}>
+        <div
+          className="flex cursor-pointer flex-row items-center justify-between bg-white"
+          {...getToggleButtonProps()}
+        >
+          <span data-testid="background-dropdown-button-name" className="font-medium">
+            {getToggleButtonName()}
+          </span>
+          <Icon
+            name="chevron-down"
+            className={twMerge('arrow-button h-6 w-6 fill-primary-500', isOpen && 'rotate-180')}
+          />
+        </div>
+      </div>
+      <ul
+        className={`absolute z-10 max-h-80 w-72 overflow-scroll rounded-b bg-white p-0 ${
+          !isOpen && 'hidden'
+        }`}
+        {...getMenuProps()}
+      >
+        {isOpen &&
+          backgrounds &&
+          backgrounds.map((item, index) => (
+            <li
+              className={twMerge(
+                'border-t',
+                highlightedIndex === index && 'text-primary-500',
+                selectedBackground === item && 'font-bold',
+                'flex flex-col px-4 py-2 shadow-sm',
+              )}
+              key={item.id}
+              {...getItemProps({ item, index })}
+            >
+              <span>{item.name}</span>
+            </li>
+          ))}
+      </ul>
+    </div>
+  );
+};
diff --git a/src/components/Map/MapAdditionalOptions/BackgroundsSelector/index.ts b/src/components/Map/MapAdditionalOptions/BackgroundsSelector/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0b379515e412b197f8e195c7e0b4e6044437fe21
--- /dev/null
+++ b/src/components/Map/MapAdditionalOptions/BackgroundsSelector/index.ts
@@ -0,0 +1 @@
+export { BackgroundSelector } from './BackgroundsSelector.component';
diff --git a/src/components/Map/MapAdditionalOptions/MapAdditionalOptions.component.test.tsx b/src/components/Map/MapAdditionalOptions/MapAdditionalOptions.component.test.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..1dfdf365a4f01fe8a1ef1ecba56dee2045c99d57
--- /dev/null
+++ b/src/components/Map/MapAdditionalOptions/MapAdditionalOptions.component.test.tsx
@@ -0,0 +1,29 @@
+import { StoreType } from '@/redux/store';
+import { render, screen } from '@testing-library/react';
+import {
+  InitialStoreState,
+  getReduxWrapperWithStore,
+} from '@/utils/testing/getReduxWrapperWithStore';
+import { MapAdditionalOptions } from './MapAdditionalOptions.component';
+
+const renderComponent = (initialStoreState: InitialStoreState = {}): { store: StoreType } => {
+  const { Wrapper, store } = getReduxWrapperWithStore(initialStoreState);
+
+  return (
+    render(
+      <Wrapper>
+        <MapAdditionalOptions />
+      </Wrapper>,
+    ),
+    {
+      store,
+    }
+  );
+};
+
+describe('MapAdditionalOptions - component', () => {
+  it('should display background selector', () => {
+    renderComponent();
+    expect(screen.getByTestId('background-selector')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/Map/MapAdditionalOptions/MapAdditionalOptions.component.tsx b/src/components/Map/MapAdditionalOptions/MapAdditionalOptions.component.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a7845ac5ea8635064290ac1edfefdb289215b57e
--- /dev/null
+++ b/src/components/Map/MapAdditionalOptions/MapAdditionalOptions.component.tsx
@@ -0,0 +1,10 @@
+import { twMerge } from 'tailwind-merge';
+import { BackgroundSelector } from './BackgroundsSelector';
+
+// top-[calc(64px+40px+24px)] -> TOP_BAR_HEIGHT+MAP_NAVIGATION_HEIGHT+DISTANCE_FROM_MAP_NAVIGATION
+
+export const MapAdditionalOptions = (): JSX.Element => (
+  <div className={twMerge('absolute right-6 top-[calc(64px+40px+24px)] z-10')}>
+    <BackgroundSelector />
+  </div>
+);
diff --git a/src/components/Map/MapAdditionalOptions/index.ts b/src/components/Map/MapAdditionalOptions/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ff61a27a2ae3155839070f31146f77fca1b8df2c
--- /dev/null
+++ b/src/components/Map/MapAdditionalOptions/index.ts
@@ -0,0 +1 @@
+export { MapAdditionalOptions } from './MapAdditionalOptions.component';
diff --git a/src/components/Map/MapViewer/MapViewer.component.test.tsx b/src/components/Map/MapViewer/MapViewer.component.test.tsx
index 49bc8cef1aeb20e57a2b200751e31b82828667d8..234854206f6a5310ca22b3009a0ddf11adfcbf92 100644
--- a/src/components/Map/MapViewer/MapViewer.component.test.tsx
+++ b/src/components/Map/MapViewer/MapViewer.component.test.tsx
@@ -1,13 +1,16 @@
-import mapReducer from '@/redux/map/map.slice';
-import { MapState } from '@/redux/map/map.types';
-import { ToolkitStoreWithSingleSlice } from '@/utils/createStoreInstanceUsingSliceReducer';
-import { getReduxWrapperUsingSliceReducer } from '@/utils/testing/getReduxWrapperUsingSliceReducer';
 import { render, screen } from '@testing-library/react';
+import { StoreType } from '@/redux/store';
+import { initialMapStateFixture } from '@/redux/map/map.fixtures';
+import { BACKGROUND_INITIAL_STATE_MOCK } from '@/redux/backgrounds/background.mock';
+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
 import { MapViewer } from './MapViewer.component';
 import { MAP_VIEWER_ROLE } from './MapViewer.constants';
 
-const renderComponent = (): { store: ToolkitStoreWithSingleSlice<MapState> } => {
-  const { Wrapper, store } = getReduxWrapperUsingSliceReducer('map', mapReducer);
+const renderComponent = (): { store: StoreType } => {
+  const { Wrapper, store } = getReduxWrapperWithStore({
+    map: initialMapStateFixture,
+    backgrounds: BACKGROUND_INITIAL_STATE_MOCK,
+  });
 
   return (
     render(
diff --git a/src/components/Map/MapViewer/utils/config/useOlMapLayers.test.ts b/src/components/Map/MapViewer/utils/config/useOlMapLayers.test.ts
index 00a22c0ba170bac5de72163fa804b9fdc6ea2141..c240ae88a5017c0108be17e74e272dcf84abe855 100644
--- a/src/components/Map/MapViewer/utils/config/useOlMapLayers.test.ts
+++ b/src/components/Map/MapViewer/utils/config/useOlMapLayers.test.ts
@@ -1,16 +1,16 @@
 /* eslint-disable no-magic-numbers */
 import { MAP_DATA_INITIAL_STATE, OPENED_MAPS_INITIAL_STATE } from '@/redux/map/map.constants';
-import mapSlice from '@/redux/map/map.slice';
-import { getReduxWrapperUsingSliceReducer } from '@/utils/testing/getReduxWrapperUsingSliceReducer';
 import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import { initialMapStateFixture } from '@/redux/map/map.fixtures';
+import { BACKGROUND_INITIAL_STATE_MOCK } from '@/redux/backgrounds/background.mock';
 import { renderHook, waitFor } from '@testing-library/react';
 import { Map } from 'ol';
 import BaseLayer from 'ol/layer/Base';
 import TileLayer from 'ol/layer/Tile';
 import VectorLayer from 'ol/layer/Vector';
 import React from 'react';
-import { useOlMap } from '../useOlMap';
 import { useOlMapLayers } from './useOlMapLayers';
+import { useOlMap } from '../useOlMap';
 
 const useRefValue = {
   current: null,
@@ -35,7 +35,11 @@ jest.spyOn(React, 'useRef').mockReturnValue(useRefValue);
 
 describe('useOlMapLayers - util', () => {
   it('should modify layers of the map instance on init', async () => {
-    const { Wrapper } = getReduxWrapperUsingSliceReducer('map', mapSlice);
+    const { Wrapper } = getReduxWrapperWithStore({
+      map: initialMapStateFixture,
+      backgrounds: BACKGROUND_INITIAL_STATE_MOCK,
+    });
+
     const dummyElement = document.createElement('div');
     const mapInstance = new Map({ target: dummyElement });
     const setLayersSpy = jest.spyOn(mapInstance, 'setLayers');
diff --git a/src/components/Map/MapViewer/utils/config/useOlMapView.test.ts b/src/components/Map/MapViewer/utils/config/useOlMapView.test.ts
index c50c543a6337144e7d816a5f257bf33b3a24bb7d..2832e68da8c053073a8d9bf713a99251c4e42a6a 100644
--- a/src/components/Map/MapViewer/utils/config/useOlMapView.test.ts
+++ b/src/components/Map/MapViewer/utils/config/useOlMapView.test.ts
@@ -1,9 +1,13 @@
 /* eslint-disable no-magic-numbers */
+import {
+  BACKGROUNDS_MOCK,
+  BACKGROUND_INITIAL_STATE_MOCK,
+} from '@/redux/backgrounds/background.mock';
 import { MAP_DATA_INITIAL_STATE, OPENED_MAPS_INITIAL_STATE } from '@/redux/map/map.constants';
-import mapSlice, { setMapPosition } from '@/redux/map/map.slice';
-import { getReduxWrapperUsingSliceReducer } from '@/utils/testing/getReduxWrapperUsingSliceReducer';
+import { initialMapStateFixture } from '@/redux/map/map.fixtures';
+import { setMapPosition } from '@/redux/map/map.slice';
 import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
-import { renderHook, waitFor } from '@testing-library/react';
+import { act, renderHook, waitFor } from '@testing-library/react';
 import { View } from 'ol';
 import Map from 'ol/Map';
 import React from 'react';
@@ -33,24 +37,31 @@ jest.spyOn(React, 'useRef').mockReturnValue(useRefValue);
 
 describe('useOlMapView - util', () => {
   it('should modify view of the map instance on INITIAL position config change', async () => {
-    const { Wrapper, store } = getReduxWrapperUsingSliceReducer('map', mapSlice);
+    const { Wrapper, store } = getReduxWrapperWithStore({
+      map: initialMapStateFixture,
+      backgrounds: { ...BACKGROUND_INITIAL_STATE_MOCK, data: BACKGROUNDS_MOCK },
+    });
+
     const dummyElement = document.createElement('div');
     const { result: hohResult } = renderHook(() => useOlMap({ target: dummyElement }), {
       wrapper: Wrapper,
     });
+
     const setViewSpy = jest.spyOn(hohResult.current.mapInstance as Map, 'setView');
     const CALLED_ONCE = 1;
 
-    store.dispatch(
-      setMapPosition({
-        position: {
-          initial: {
-            x: 0,
-            y: 0,
+    await act(() => {
+      store.dispatch(
+        setMapPosition({
+          position: {
+            initial: {
+              x: 0,
+              y: 0,
+            },
           },
-        },
-      }),
-    );
+        }),
+      );
+    });
 
     renderHook(() => useOlMapView({ mapInstance: hohResult.current.mapInstance }), {
       wrapper: Wrapper,
@@ -89,6 +100,7 @@ describe('useOlMapView - util', () => {
         },
         openedMaps: OPENED_MAPS_INITIAL_STATE,
       },
+      backgrounds: BACKGROUND_INITIAL_STATE_MOCK,
     });
     const dummyElement = document.createElement('div');
     const { result: hohResult } = renderHook(() => useOlMap({ target: dummyElement }), {
diff --git a/src/components/Map/MapViewer/utils/listeners/onMapSingleClick.test.ts b/src/components/Map/MapViewer/utils/listeners/onMapSingleClick.test.ts
index 184c604e0beef021d101047566bd4aa0ee4edb4c..cd40e1377518ea4b23cdf2391f6d6790767d2bf4 100644
--- a/src/components/Map/MapViewer/utils/listeners/onMapSingleClick.test.ts
+++ b/src/components/Map/MapViewer/utils/listeners/onMapSingleClick.test.ts
@@ -8,7 +8,7 @@ import {
 } from '@/models/mocks/elementSearchResultMock';
 import { apiPath } from '@/redux/apiPath';
 import { mockNetworkNewAPIResponse, mockNetworkResponse } from '@/utils/mockNetworkResponse';
-import { getReduxStoreActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
+import { getReduxStoreWithActionsListener } from '@/utils/testing/getReduxStoreActionsListener';
 import { waitFor } from '@testing-library/react';
 import { HttpStatusCode } from 'axios';
 import { MapBrowserEvent } from 'ol';
@@ -31,7 +31,7 @@ describe('onMapSingleClick - util', () => {
   });
 
   describe('when searchResults are undefined', () => {
-    const { store } = getReduxStoreActionsListener();
+    const { store } = getReduxStoreWithActionsListener();
     const { dispatch } = store;
     const modelId = 1000;
     const mapSize = {
@@ -58,7 +58,7 @@ describe('onMapSingleClick - util', () => {
   });
 
   describe('when searchResults are empty', () => {
-    const { store } = getReduxStoreActionsListener();
+    const { store } = getReduxStoreWithActionsListener();
     const { dispatch } = store;
 
     const modelId = 1000;
@@ -88,7 +88,7 @@ describe('onMapSingleClick - util', () => {
 
   describe('when searchResults are valid', () => {
     describe('when results type is ALIAS', () => {
-      const { store } = getReduxStoreActionsListener();
+      const { store } = getReduxStoreWithActionsListener();
       const { dispatch } = store;
       const { modelId } = ELEMENT_SEARCH_RESULT_MOCK_ALIAS;
       const mapSize = {
@@ -125,7 +125,7 @@ describe('onMapSingleClick - util', () => {
     });
 
     describe('when results type is REACTION', () => {
-      const { store } = getReduxStoreActionsListener();
+      const { store } = getReduxStoreWithActionsListener();
       const { dispatch } = store;
       const { modelId } = ELEMENT_SEARCH_RESULT_MOCK_REACTION;
       const mapSize = {
@@ -167,7 +167,7 @@ describe('onMapSingleClick - util', () => {
 });
 
 describe('handleAliasResults - util', () => {
-  const { store } = getReduxStoreActionsListener();
+  const { store } = getReduxStoreWithActionsListener();
   const { dispatch } = store;
 
   mockedAxiosOldClient
@@ -192,7 +192,7 @@ describe('handleAliasResults - util', () => {
 });
 
 describe('handleReactionResults - util', () => {
-  const { store } = getReduxStoreActionsListener();
+  const { store } = getReduxStoreWithActionsListener();
   const { dispatch } = store;
 
   mockedAxiosNewClient
diff --git a/src/components/Map/MapViewer/utils/useOlMap.test.ts b/src/components/Map/MapViewer/utils/useOlMap.test.ts
index 29cf1fc029a9296492288ab0304e851d49e8119c..79bc1ed1bb956a9ad94c51a635a721d6a1a93f3d 100644
--- a/src/components/Map/MapViewer/utils/useOlMap.test.ts
+++ b/src/components/Map/MapViewer/utils/useOlMap.test.ts
@@ -1,8 +1,9 @@
-import mapSlice from '@/redux/map/map.slice';
-import { getReduxWrapperUsingSliceReducer } from '@/utils/testing/getReduxWrapperUsingSliceReducer';
 import { renderHook, waitFor } from '@testing-library/react';
 import { Map } from 'ol';
 import React from 'react';
+import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
+import { initialMapStateFixture } from '@/redux/map/map.fixtures';
+import { BACKGROUND_INITIAL_STATE_MOCK } from '@/redux/backgrounds/background.mock';
 import { useOlMap } from './useOlMap';
 
 const useRefValue = {
@@ -27,7 +28,10 @@ Object.defineProperty(useRefValue, 'current', {
 jest.spyOn(React, 'useRef').mockReturnValue(useRefValue);
 
 describe('useOlMap - util', () => {
-  const { Wrapper } = getReduxWrapperUsingSliceReducer('map', mapSlice);
+  const { Wrapper } = getReduxWrapperWithStore({
+    map: initialMapStateFixture,
+    backgrounds: BACKGROUND_INITIAL_STATE_MOCK,
+  });
 
   describe('when initializing', () => {
     it('should set map instance', async () => {
diff --git a/src/models/reaction.ts b/src/models/reaction.ts
index b36154d9b45d07d7a25ea14b04b1b87b50cdbf9f..51c7c51b014b35f76668730099639a929fb251cc 100644
--- a/src/models/reaction.ts
+++ b/src/models/reaction.ts
@@ -1,6 +1,7 @@
 import { z } from 'zod';
 import { positionSchema } from './positionSchema';
 import { productsSchema } from './products';
+import { reactionLineSchema } from './reactionLineSchema';
 import { referenceSchema } from './referenceSchema';
 
 export const reactionSchema = z.object({
@@ -8,13 +9,7 @@ export const reactionSchema = z.object({
   hierarchyVisibilityLevel: z.string(),
   id: z.number(),
   kineticLaw: z.null(),
-  lines: z.array(
-    z.object({
-      start: positionSchema,
-      end: positionSchema,
-      type: z.string(),
-    }),
-  ),
+  lines: z.array(reactionLineSchema),
   modelId: z.number(),
   modifiers: z.array(productsSchema),
   name: z.string(),
diff --git a/src/models/reactionLineSchema.ts b/src/models/reactionLineSchema.ts
new file mode 100644
index 0000000000000000000000000000000000000000..4be9fa0c959b2fbe78bb38bc3d53a829db7d4eda
--- /dev/null
+++ b/src/models/reactionLineSchema.ts
@@ -0,0 +1,8 @@
+import { z } from 'zod';
+import { positionSchema } from './positionSchema';
+
+export const reactionLineSchema = z.object({
+  start: positionSchema,
+  end: positionSchema,
+  type: z.string(),
+});
diff --git a/src/redux/backgrounds/background.selectors.ts b/src/redux/backgrounds/background.selectors.ts
index 319bfc27376c4a099fe51ee0fee14b4a2e73348d..596301e1262dc5ed73303636d8fe7acd87da1c94 100644
--- a/src/redux/backgrounds/background.selectors.ts
+++ b/src/redux/backgrounds/background.selectors.ts
@@ -4,28 +4,32 @@ import { rootSelector } from '../root/root.selectors';
 
 export const backgroundsSelector = createSelector(rootSelector, state => state.backgrounds);
 
-export const backgroundsDataSelector = createSelector(
-  backgroundsSelector,
-  backgrounds => backgrounds?.data || [],
-);
+export const backgroundsDataSelector = createSelector(backgroundsSelector, backgrounds => {
+  return backgrounds.data;
+});
 
 const MAIN_BACKGROUND = 0;
 export const mainBackgroundsDataSelector = createSelector(
   backgroundsDataSelector,
-  backgrounds => backgrounds[MAIN_BACKGROUND],
+  backgrounds => backgrounds && backgrounds[MAIN_BACKGROUND],
+);
+export const mainBackgroundIdSelector = createSelector(
+  backgroundsDataSelector,
+  backgrounds => backgrounds && backgrounds[MAIN_BACKGROUND]?.id,
 );
 
 export const currentBackgroundSelector = createSelector(
   backgroundsDataSelector,
   mapDataSelector,
-  (backgrounds, mapData) => backgrounds.find(background => background.id === mapData.backgroundId),
+  (backgrounds, mapData) =>
+    backgrounds && backgrounds.find(background => background.id === mapData.backgroundId),
 );
 
 export const currentBackgroundImageSelector = createSelector(
   mapDataSelector,
   currentBackgroundSelector,
   (mapData, background) =>
-    background ? background.images.find(image => image.model.id === mapData.modelId) : undefined,
+    background && background.images.find(image => image.model.id === mapData.modelId),
 );
 
 export const currentBackgroundImagePathSelector = createSelector(
diff --git a/src/redux/backgrounds/backgrounds.types.ts b/src/redux/backgrounds/backgrounds.types.ts
index 5457757cb6dfddd22da156c6f6ba400ac9480647..7ce8fcfc7643e9ea526d79895928037fd19d27b8 100644
--- a/src/redux/backgrounds/backgrounds.types.ts
+++ b/src/redux/backgrounds/backgrounds.types.ts
@@ -1,4 +1,4 @@
 import { FetchDataState } from '@/types/fetchDataState';
 import { MapBackground } from '@/types/models';
 
-export type BackgroundsState = FetchDataState<MapBackground[] | []>;
+export type BackgroundsState = FetchDataState<MapBackground[]>;
diff --git a/src/redux/map/map.reducers.ts b/src/redux/map/map.reducers.ts
index b0ad81bf535fa81d7f6dc1678a8b2b6d7eaeee06..ae325fb9127f901719094ef2883ce029581aede1 100644
--- a/src/redux/map/map.reducers.ts
+++ b/src/redux/map/map.reducers.ts
@@ -5,6 +5,7 @@ import {
   MapState,
   OpenMapAndSetActiveAction,
   SetActiveMapAction,
+  SetBackgroundAction,
   SetMapDataAction,
   SetMapPositionDataAction,
 } from './map.types';
@@ -84,6 +85,10 @@ export const closeMapAndSetMainMapActiveReducer = (
     state.openedMaps.find(openedMap => openedMap.modelName === MAIN_MAP)?.modelId || ZERO;
 };
 
+export const setMapBackgroundReducer = (state: MapState, action: SetBackgroundAction): void => {
+  state.data.backgroundId = action.payload;
+};
+
 export const initMapSizeAndModelIdReducer = (builder: ActionReducerMapBuilder<MapState>): void => {
   builder.addCase(initMapSizeAndModelId.fulfilled, (state, action) => {
     state.data.modelId = action.payload.modelId;
diff --git a/src/redux/map/map.slice.ts b/src/redux/map/map.slice.ts
index ca51213ca667fc5087cec6f45d988c61f508d8dc..73cbb92f2e7887f7674dd7260e8e895b45de24bb 100644
--- a/src/redux/map/map.slice.ts
+++ b/src/redux/map/map.slice.ts
@@ -11,6 +11,7 @@ import {
   initOpenedMapsReducer,
   initMapSizeAndModelIdReducer,
   initMapBackgroundsReducer,
+  setMapBackgroundReducer,
 } from './map.reducers';
 import { MapState } from './map.types';
 
@@ -31,6 +32,7 @@ const mapSlice = createSlice({
     closeMap: closeMapReducer,
     closeMapAndSetMainMapActive: closeMapAndSetMainMapActiveReducer,
     setMapPosition: setMapPositionReducer,
+    setMapBackground: setMapBackgroundReducer,
   },
   extraReducers: builder => {
     initMapPositionReducers(builder);
@@ -47,6 +49,7 @@ export const {
   closeMap,
   closeMapAndSetMainMapActive,
   setMapPosition,
+  setMapBackground,
 } = mapSlice.actions;
 
 export default mapSlice.reducer;
diff --git a/src/redux/map/map.types.ts b/src/redux/map/map.types.ts
index bd641cd7708a0116fe2a8ba12741733b4a9ac1f8..9ed2e9129f3906fbce9393b8525a1a289827377c 100644
--- a/src/redux/map/map.types.ts
+++ b/src/redux/map/map.types.ts
@@ -113,3 +113,6 @@ export type InitMapBackgroundActionPayload = number;
 export type InitMapBackgroundParams = {
   queryData: QueryData;
 };
+
+export type SetBackgroundActionPayload = number;
+export type SetBackgroundAction = PayloadAction<SetBackgroundActionPayload>;
diff --git a/src/redux/map/middleware/map.middleware.ts b/src/redux/map/middleware/map.middleware.ts
index 5658c14519d6d650b3c70b52abf90f2252fd1219..8083f40e940043bc116ec8cdcaca7f1bbeb233cc 100644
--- a/src/redux/map/middleware/map.middleware.ts
+++ b/src/redux/map/middleware/map.middleware.ts
@@ -8,6 +8,7 @@ import {
   setMapData,
   setMapPosition,
   closeMapAndSetMainMapActive,
+  setMapBackground,
 } from '../map.slice';
 import { checkIfIsMapUpdateActionValid } from './checkIfIsMapUpdateActionValid';
 import { getUpdatedModel } from './getUpdatedModel';
@@ -42,6 +43,12 @@ export const mapDataMiddlewareListener = async (
 };
 
 startListening({
-  matcher: isAnyOf(setMapData, setActiveMap, openMapAndSetActive, closeMapAndSetMainMapActive),
+  matcher: isAnyOf(
+    setMapData,
+    setActiveMap,
+    openMapAndSetActive,
+    closeMapAndSetMainMapActive,
+    setMapBackground,
+  ),
   effect: mapDataMiddlewareListener,
 });
diff --git a/src/redux/models/models.selectors.ts b/src/redux/models/models.selectors.ts
index 70a6671c5bb2f6aef66ac96c76c9f447a12e314b..a71c53eb1faa4cc00595fa382bd5096309866db9 100644
--- a/src/redux/models/models.selectors.ts
+++ b/src/redux/models/models.selectors.ts
@@ -1,7 +1,7 @@
 import { rootSelector } from '@/redux/root/root.selectors';
 import { createSelector } from '@reduxjs/toolkit';
-import { mapDataSelector } from '../map/map.selectors';
 import { MODEL_ID_DEFAULT } from '../map/map.constants';
+import { mapDataSelector } from '../map/map.selectors';
 
 export const modelsSelector = createSelector(rootSelector, state => state.models);
 
@@ -15,7 +15,6 @@ export const currentModelSelector = createSelector(
 
 export const currentModelIdSelector = createSelector(
   currentModelSelector,
-  // eslint-disable-next-line no-magic-numbers
   model => model?.idObject || MODEL_ID_DEFAULT,
 );
 export const modelByIdSelector = createSelector(
diff --git a/src/redux/reactions/reactions.thunks.ts b/src/redux/reactions/reactions.thunks.ts
index 51ef6bfa992578d3a90ded8ea377de68c6f077a3..dbbf7fc725b6501dc9f4136705df1ae56b539ba4 100644
--- a/src/redux/reactions/reactions.thunks.ts
+++ b/src/redux/reactions/reactions.thunks.ts
@@ -6,16 +6,14 @@ import { validateDataUsingZodSchema } from '@/utils/validateDataUsingZodSchema';
 import { createAsyncThunk } from '@reduxjs/toolkit';
 import { z } from 'zod';
 
-const ZERO = 0;
-
 export const getReactionsByIds = createAsyncThunk<Reaction[] | undefined, number[]>(
   'reactions/getByIds',
   async (ids: number[]): Promise<Reaction[] | undefined> => {
     const response = await axiosInstance.get<Reaction[]>(apiPath.getReactionsWithIds(ids));
     const isDataValid = validateDataUsingZodSchema(response.data, z.array(reactionSchema));
 
-    if (!isDataValid || response?.data?.length === ZERO) {
-      return isDataValid ? response.data : undefined;
+    if (!isDataValid) {
+      return undefined;
     }
 
     return response.data;
diff --git a/src/utils/map/getPointOffset.ts b/src/utils/map/getPointOffset.ts
index 6a1c66294f1e93789a74b9dde710b77d429e47f9..aaedb56044621c4fc4c1c35c08a7169e438294fc 100644
--- a/src/utils/map/getPointOffset.ts
+++ b/src/utils/map/getPointOffset.ts
@@ -1,4 +1,3 @@
-/* eslint-disable no-magic-numbers */ /* due to math nature of this algo */
 import { VALID_MAP_SIZE_SCHEMA } from '@/constants/map';
 import { MapSize } from '@/redux/map/map.types';
 import { Point } from '@/types/map';
@@ -9,17 +8,20 @@ interface GetPointOffsetResults extends Point {
   zoomFactor: number;
 }
 
+const SHIFT_MULTIPLIER = 2;
+const DIVIDE_TO_CENTER = 2;
+
 export const getPointOffset = (point: Point, mapSize: MapSize): GetPointOffsetResults => {
   // parse throws error if map size may lead to invalid results
   VALID_MAP_SIZE_SCHEMA.parse(mapSize);
 
   const longestSide = Math.max(mapSize.width, mapSize.height);
-  const minZoomShifted = mapSize.minZoom * 2 ** mapSize.minZoom;
-  const zoomFactor = longestSide / (mapSize.tileSize / minZoomShifted) / 2;
+  const minZoomShifted = mapSize.minZoom * SHIFT_MULTIPLIER ** mapSize.minZoom;
+  const zoomFactor = longestSide / (mapSize.tileSize / minZoomShifted) / DIVIDE_TO_CENTER;
 
   const pointOrigin: Point = {
-    x: mapSize.tileSize / 2,
-    y: mapSize.tileSize / 2,
+    x: mapSize.tileSize / DIVIDE_TO_CENTER,
+    y: mapSize.tileSize / DIVIDE_TO_CENTER,
   };
 
   const pointShifted: Point = {
diff --git a/src/utils/testing/getReduxStoreActionsListener.tsx b/src/utils/testing/getReduxStoreActionsListener.tsx
index 22c12cd0e7bc8a8d832788d4895a4b9765cac19a..56c21265cfe8787e34d672de681fe3b87dde512a 100644
--- a/src/utils/testing/getReduxStoreActionsListener.tsx
+++ b/src/utils/testing/getReduxStoreActionsListener.tsx
@@ -10,12 +10,12 @@ interface WrapperProps {
 
 export type InitialStoreState = Partial<RootState>;
 
-type GetReduxStoreActionsListener = (initialState?: InitialStoreState) => {
+type GetReduxStoreWithActionsListener = (initialState?: InitialStoreState) => {
   Wrapper: ({ children }: WrapperProps) => JSX.Element;
   store: MockStoreEnhanced<Partial<RootState>, AppDispatch>;
 };
 
-export const getReduxStoreActionsListener: GetReduxStoreActionsListener = (
+export const getReduxStoreWithActionsListener: GetReduxStoreWithActionsListener = (
   preloadedState: InitialStoreState = {},
 ) => {
   const testStore = configureStore<Partial<RootState>, AppDispatch>([thunk, ...middlewares])(
diff --git a/tailwind.config.ts b/tailwind.config.ts
index f63ef9478c9e0f39486bd3b7dacd9ef45f17e89c..62c3f4f71cfba9d10d68444821d10e04a1366db3 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -33,7 +33,7 @@ const config: Config = {
         'calc-drawer': 'calc(100% - 104px)',
       },
       boxShadow: {
-        'map-navigation-bar': '4px 8px 32px 0px rgba(0, 0, 0, 0.12)',
+        primary: '4px 8px 32px 0px rgba(0, 0, 0, 0.12)',
       },
     },
     fontFamily: {
diff --git a/yarn.lock b/yarn.lock
index 2c6c5417619abdd4e54d32e1504cb32dd745a0cd..3ba2ee3e331785c9cd9c4f37c51d09a81789e163 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -273,7 +273,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.22.5"
 
-"@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.20.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.20.7", "@babel/runtime@^7.22.15", "@babel/runtime@^7.9.2":
   "integrity" "sha512-hC2v6p8ZSI/W0HUzh3V8C5g+NwSKzKPtJwSpTjwl0o297GP9+ZLQSkdvHz46CM3LqyoXxq+5G9komY+eSqSO0g=="
   "resolved" "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.1.tgz"
   "version" "7.23.1"
@@ -2219,6 +2219,11 @@
     "array-ify" "^1.0.0"
     "dot-prop" "^5.1.0"
 
+"compute-scroll-into-view@^3.0.3":
+  "integrity" "sha512-rj8l8pD4bJ1nx+dAkMhV1xB5RuZEyVysfxJqB1pRchh1KVvwOv9b7CGB8ZfjTImVv2oF+sYMUkMZq6Na5Ftmbg=="
+  "resolved" "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.1.0.tgz"
+  "version" "3.1.0"
+
 "concat-map@0.0.1":
   "integrity" "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
   "resolved" "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
@@ -2662,6 +2667,17 @@
   dependencies:
     "is-obj" "^2.0.0"
 
+"downshift@^8.2.3":
+  "integrity" "sha512-1HkvqaMTZpk24aqnXaRDnT+N5JCbpFpW+dCogB11+x+FCtfkFX0MbAO4vr/JdXi1VYQF174KjNUveBXqaXTPtg=="
+  "resolved" "https://registry.npmjs.org/downshift/-/downshift-8.2.3.tgz"
+  "version" "8.2.3"
+  dependencies:
+    "@babel/runtime" "^7.22.15"
+    "compute-scroll-into-view" "^3.0.3"
+    "prop-types" "^15.8.1"
+    "react-is" "^18.2.0"
+    "tslib" "^2.6.2"
+
 "drange@^1.0.2":
   "integrity" "sha512-pYxfDYpued//QpnLIm4Avk7rsNtAtQkUES2cwAYSvD/wd2pKD71gN2Ebj3e7klzXwjocvE8c5vx/1fxwpqmSxA=="
   "resolved" "https://registry.npmjs.org/drange/-/drange-1.1.1.tgz"
@@ -6060,6 +6076,11 @@
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   "version" "18.2.0"
 
+"react-is@^18.2.0":
+  "integrity" "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
+  "resolved" "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
+  "version" "18.2.0"
+
 "react-redux@^7.2.1 || ^8.0.2", "react-redux@^8.1.2":
   "integrity" "sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw=="
   "resolved" "https://registry.npmjs.org/react-redux/-/react-redux-8.1.3.tgz"
@@ -6072,7 +6093,7 @@
     "react-is" "^18.0.0"
     "use-sync-external-store" "^1.0.0"
 
-"react@^16.3.2 || ^17.0.0 || ^18.0.0", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0-0 || ^17.0.0 || ^18.0.0", "react@^16.9.0 || ^17.0.0 || ^18", "react@^18.0.0", "react@^18.2.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@>=16.8.0", "react@>=17.0.0", "react@18.2.0":
+"react@^16.3.2 || ^17.0.0 || ^18.0.0", "react@^16.8 || ^17.0 || ^18.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0-0 || ^17.0.0 || ^18.0.0", "react@^16.9.0 || ^17.0.0 || ^18", "react@^18.0.0", "react@^18.2.0", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", "react@>=16.12.0", "react@>=16.8.0", "react@>=17.0.0", "react@18.2.0":
   "integrity" "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ=="
   "resolved" "https://registry.npmjs.org/react/-/react-18.2.0.tgz"
   "version" "18.2.0"
@@ -6968,7 +6989,7 @@
   "resolved" "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
   "version" "1.14.1"
 
-"tslib@^2.1.0", "tslib@^2.4.0", "tslib@^2.5.0", "tslib@^2.6.0":
+"tslib@^2.1.0", "tslib@^2.4.0", "tslib@^2.5.0", "tslib@^2.6.0", "tslib@^2.6.2":
   "integrity" "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
   "resolved" "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
   "version" "2.6.2"