diff --git a/.eslintrc b/.eslintrc
index d6de011f..593a1f77 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,10 +1,18 @@
 {
-    "parserOptions": { "project": ["./tsconfig.json"] },
-    "extends": ["react-app"],
-    "ignorePatterns": ["vite.config.*", "commitlint.config.js"],
-    "plugins": ["react"],
-    "rules": {
-        "import/exports-last": 0,
-        "no-lonely-if": 0
+  "parserOptions": { "project": ["./tsconfig.json"] },
+  "extends": ["react-app"],
+  "ignorePatterns": ["vite.config.*", "commitlint.config.js"],
+  "plugins": ["react"],
+  "rules": {
+    "import/exports-last": 0,
+    "no-lonely-if": 0
+  },
+  "overrides": [
+    {
+      "files": ["packages/react-components/**/*.{ts,tsx,js,jsx}"],
+      "rules": {
+        "react-hooks/exhaustive-deps": "off"
+      }
     }
+  ]
 }
diff --git a/packages/react-components/src/components/autocomplete/autocomplete.stories.tsx b/packages/react-components/src/components/autocomplete/autocomplete.stories.tsx
index ce883c7f..a09911b4 100644
--- a/packages/react-components/src/components/autocomplete/autocomplete.stories.tsx
+++ b/packages/react-components/src/components/autocomplete/autocomplete.stories.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention, @typescript-eslint/prefer-regexp-exec, @typescript-eslint/no-magic-numbers*/
-import React from 'react';
 import type { StoryFn } from '@storybook/react';
 import { TextField } from '@map-colonies/react-core';
 import { CSFStory } from '../utils/story';
@@ -7,14 +5,14 @@ import { CSFStory } from '../utils/story';
 import Autocomplete from './autocomplete';
 
 const meta = {
-  title: 'Autocomplete',
+  title: 'Components/Autocomplete',
   component: Autocomplete,
 };
 export default meta;
 
-export const AutocpmleteTextArea: CSFStory<JSX.Element> = () => (
+export const AutocompleteTextArea: CSFStory<JSX.Element> = () => (
   <>
-    <h1>Autocpmlete with native HTML TEXTAREA</h1>
+    <h1>Autocomplete with native HTML TEXTAREA</h1>
     <Autocomplete
       {...{
         options: ['apple', 'apricot', 'banana', 'bounty'],
@@ -22,14 +20,14 @@ export const AutocpmleteTextArea: CSFStory<JSX.Element> = () => (
     />
   </>
 );
-AutocpmleteTextArea.story = {
-  name: 'Autocpmlete with TEXTAREA HTML',
+AutocompleteTextArea.story = {
+  name: 'Autocomplete with TEXTAREA HTML',
 };
 
-export const AutocpmleteTextField: StoryFn = (args: Record<string, unknown>) => {
+export const AutocompleteTextField: StoryFn = (args: Record<string, unknown>) => {
   return (
     <>
-      <h1>Autocpmlete with TEXTFIELD react-core component</h1>
+      <h1>Autocomplete with TEXTFIELD react-core component</h1>
       <Autocomplete
         {...{
           Component: <TextField />,
@@ -43,8 +41,8 @@ export const AutocpmleteTextField: StoryFn = (args: Record<string, unknown>) =>
     </>
   );
 };
-AutocpmleteTextField.storyName = 'Autocpmlete with TEXTFIELD component';
-AutocpmleteTextField.argTypes = {
+AutocompleteTextField.storyName = 'Autocomplete with TEXTFIELD component';
+AutocompleteTextField.argTypes = {
   disabled: {
     defaultValue: false,
     control: {
@@ -65,10 +63,10 @@ AutocpmleteTextField.argTypes = {
   },
 };
 
-export const AutocpmleteInComplitionModeEN: StoryFn = (args: Record<string, unknown>) => {
+export const AutocompleteInCompletionModeEN: StoryFn = (args: Record<string, unknown>) => {
   return (
     <>
-      <h1>Autocpmlete with TEXTFIELD in AUTOCOMPLETE mode in English (LTR)</h1>
+      <h1>Autocomplete with TEXTFIELD in AUTOCOMPLETE mode in English (LTR)</h1>
       <Autocomplete
         {...{
           Component: <TextField />,
@@ -80,12 +78,12 @@ export const AutocpmleteInComplitionModeEN: StoryFn = (args: Record<string, unkn
     </>
   );
 };
-AutocpmleteInComplitionModeEN.storyName = 'Autocpmlete in autocomplete MODE RTL';
+AutocompleteInCompletionModeEN.storyName = 'Autocomplete in autocomplete MODE RTL';
 
-export const AutocpmleteInComplitionModeHEB: StoryFn = (args: Record<string, unknown>) => {
+export const AutocompleteInCompletionModeHEB: StoryFn = (args: Record<string, unknown>) => {
   return (
     <div style={{ direction: 'rtl' }}>
-      <h1>Autocpmlete with TEXTFIELD in AUTOCOMPLETE mode in Hebrew (RTL)</h1>
+      <h1>Autocomplete with TEXTFIELD in AUTOCOMPLETE mode in Hebrew (RTL)</h1>
       <Autocomplete
         {...{
           Component: <TextField />,
@@ -97,4 +95,4 @@ export const AutocpmleteInComplitionModeHEB: StoryFn = (args: Record<string, unk
     </div>
   );
 };
-AutocpmleteInComplitionModeHEB.storyName = 'Autocpmlete in autocomplete MODE LTR';
+AutocompleteInCompletionModeHEB.storyName = 'Autocomplete in autocomplete MODE LTR';
diff --git a/packages/react-components/src/components/cesium-map/active-layers/active-layers-panel.tsx b/packages/react-components/src/components/cesium-map/active-layers/active-layers-panel.tsx
index 6f1510ea..93ee716c 100644
--- a/packages/react-components/src/components/cesium-map/active-layers/active-layers-panel.tsx
+++ b/packages/react-components/src/components/cesium-map/active-layers/active-layers-panel.tsx
@@ -1,6 +1,6 @@
 import { Cesium3DTileset, Rectangle } from 'cesium';
 import { get } from 'lodash';
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Tooltip, Typography } from '@map-colonies/react-core';
 import bbox from '@turf/bbox';
 import { Box } from '../../box';
@@ -145,7 +145,7 @@ export const ActiveLayersPanel: React.FC<IActiveLayersPanelProps> = ({ locale })
     });
   };
 
-  const refreshSections = (): void => {
+  const refreshSections = useCallback((): void => {
     setSections([
       {
         id: IMAGERY,
@@ -164,7 +164,7 @@ export const ActiveLayersPanel: React.FC<IActiveLayersPanelProps> = ({ locale })
         values: get3DModels(),
       },
     ]);
-  };
+  }, []);
 
   useEffect(() => {
     refreshSections();
diff --git a/packages/react-components/src/components/cesium-map/base-map/base-map-widget.tsx b/packages/react-components/src/components/cesium-map/base-map/base-map-widget.tsx
index bb10cc7d..cbc42734 100644
--- a/packages/react-components/src/components/cesium-map/base-map/base-map-widget.tsx
+++ b/packages/react-components/src/components/cesium-map/base-map/base-map-widget.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { get } from 'lodash';
 import { IBaseMap, IBaseMaps, ITerrain } from '../map';
 import { CesiumIcon } from '../widget/cesium-icon';
diff --git a/packages/react-components/src/components/cesium-map/context-menu.stories.tsx b/packages/react-components/src/components/cesium-map/context-menu.stories.tsx
index e0b82865..20e935a8 100644
--- a/packages/react-components/src/components/cesium-map/context-menu.stories.tsx
+++ b/packages/react-components/src/components/cesium-map/context-menu.stories.tsx
@@ -126,12 +126,10 @@ const ContextMenu: React.FC<IContextMenuData> = ({ data, position, style, handle
     top: `${position.y}px`,
   };
 
-  /* eslint-disable react-hooks/exhaustive-deps */
   useEffect(() => {
     setPickedLayers(mapViewer.layersManager?.pickImageryLayers(position as CesiumCartesian2));
     console.log(mapViewer.layersManager?.pickImageryLayers(position as CesiumCartesian2));
   }, [position]);
-  /* eslint-enable react-hooks/exhaustive-deps */
 
   return (
     <>
diff --git a/packages/react-components/src/components/cesium-map/data-sources/drawings.data-source.tsx b/packages/react-components/src/components/cesium-map/data-sources/drawings.data-source.tsx
index 76ad94c6..372488bc 100644
--- a/packages/react-components/src/components/cesium-map/data-sources/drawings.data-source.tsx
+++ b/packages/react-components/src/components/cesium-map/data-sources/drawings.data-source.tsx
@@ -118,7 +118,6 @@ export const CesiumDrawingsDataSource: React.FC<RCesiumDrawingDataSourceProps> =
             break;
           default:
             throw new Error(`[CESIUM DRAW]: ${drawState.type} unrecognized primitive to draw.`);
-            break;
         }
       } else {
         // eslint-disable-next-line
diff --git a/packages/react-components/src/components/cesium-map/helpers/utils.ts b/packages/react-components/src/components/cesium-map/helpers/utils.ts
index 01eb5230..460352dd 100644
--- a/packages/react-components/src/components/cesium-map/helpers/utils.ts
+++ b/packages/react-components/src/components/cesium-map/helpers/utils.ts
@@ -26,7 +26,6 @@ import area from '@turf/area';
 import bboxPolygon from '@turf/bbox-polygon';
 import centroid from '@turf/centroid';
 import { point } from '@turf/helpers';
-import * as turf from '@turf/helpers';
 import intersect from '@turf/intersect';
 import pointToPolygonDistance from '@turf/point-to-polygon-distance';
 import { ICesiumWFSLayerLabelingOptions } from '../layers';
@@ -404,7 +403,6 @@ export const defaultVisualizationHandler = (
         return [correctedCarto.longitude, correctedCarto.latitude, correctedCarto.height];
       });
 
-      // return turf.polygon(positions);
       return {
         type: 'Polygon',
         coordinates: [positions],
diff --git a/packages/react-components/src/components/cesium-map/layers/3d.tileset.with.update.tsx b/packages/react-components/src/components/cesium-map/layers/3d.tileset.with.update.tsx
index 48472de4..aaef90a0 100644
--- a/packages/react-components/src/components/cesium-map/layers/3d.tileset.with.update.tsx
+++ b/packages/react-components/src/components/cesium-map/layers/3d.tileset.with.update.tsx
@@ -37,7 +37,6 @@ export const Cesium3DTilesetWithUpdate: React.FC<ICesium3DTilesetWithUpdate> = (
     return () => {
       cancelled = true;
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [url]);
 
   useEffect(() => {
diff --git a/packages/react-components/src/components/cesium-map/layers/layers.rect.stories.tsx b/packages/react-components/src/components/cesium-map/layers/layers.rect.stories.tsx
index 597e1c2c..0ea9b971 100644
--- a/packages/react-components/src/components/cesium-map/layers/layers.rect.stories.tsx
+++ b/packages/react-components/src/components/cesium-map/layers/layers.rect.stories.tsx
@@ -1,5 +1,5 @@
 import { ImageryLayer, Rectangle } from 'cesium';
-import React, { useLayoutEffect, useMemo } from 'react';
+import React, { useEffect, useLayoutEffect, useMemo } from 'react';
 import type { StoryFn, Meta } from '@storybook/react';
 import bbox from '@turf/bbox';
 import { BASE_MAPS } from '../helpers/constants';
@@ -64,6 +64,17 @@ const layerMetaRectXYZ = {
   searchLayerPredicate: (layer: ImageryLayer): boolean => getImageryProviderUrl(layer) === optionsRectXYZ.url,
 };
 
+const layerRaster = {
+  id: '2_raster_ext',
+  type: 'XYZ_LAYER' as LayerType,
+  opacity: 1,
+  zIndex: 0,
+  show: true,
+  options: {
+    url: 'https://tiles.openaerialmap.org/5a9f90c42553e6000ce5ad6c/0/eee1a570-128e-4947-9ffa-1e69c1efab7c/{z}/{x}/{y}.png',
+  },
+};
+
 export const MapWithXYZLayersAndRect: StoryFn = () => (
   <div style={mapDivStyle}>
     <CesiumMap {...mapViewProps} layerManagerMetaMapping={layerManagerMetaMapping}>
@@ -75,21 +86,10 @@ export const MapWithXYZLayersAndRect: StoryFn = () => (
 MapWithXYZLayersAndRect.storyName = 'XYZ child layer with rect';
 
 export const MapWithSettings: StoryFn = () => {
-  const layer = {
-    id: '2_raster_ext',
-    type: 'XYZ_LAYER' as LayerType,
-    opacity: 1,
-    zIndex: 0,
-    show: true,
-    options: {
-      url: 'https://tiles.openaerialmap.org/5a9f90c42553e6000ce5ad6c/0/eee1a570-128e-4947-9ffa-1e69c1efab7c/{z}/{x}/{y}.png',
-    },
-  };
-
   return (
     <div style={mapDivStyle}>
       <CesiumMap {...mapViewProps} layerManagerMetaMapping={layerManagerMetaMapping}>
-        <LayerViewer layer={layer} />
+        <LayerViewer layer={layerRaster} />
       </CesiumMap>
     </div>
   );
@@ -105,9 +105,12 @@ const LayerViewer: React.FC<ILayerViewerProps> = (props) => {
   const { layer } = props;
 
   // For testing the exposure of current zoom level on map viewer
-  setInterval(() => {
-    console.log('######################### Zoom level: ', (mapViewer as { currentZoomLevel?: number }).currentZoomLevel);
-  }, 2000);
+  useEffect(() => {
+    const interval = window.setInterval(() => {
+      console.log('######################### Zoom level: ', (mapViewer as { currentZoomLevel?: number }).currentZoomLevel);
+    }, 2000);
+    return () => window.clearInterval(interval);
+  }, [mapViewer]);
 
   // Mockin footprint data on layer meta
   const layerFootprint = useMemo(
@@ -132,6 +135,10 @@ const LayerViewer: React.FC<ILayerViewerProps> = (props) => {
     layer.options.rectangle = layerManagerRect;
 
     mapViewer.layersManager?.addRasterLayer(layer, 0, '');
+
+    return () => {
+      mapViewer.layersManager?.removeLayer(layer.id);
+    };
   }, [mapViewer, layerFootprint, layer]);
 
   return <></>;
diff --git a/packages/react-components/src/components/cesium-map/layers/optimized-tile-requests.stories.tsx b/packages/react-components/src/components/cesium-map/layers/optimized-tile-requests.stories.tsx
index 55a6aafc..7f57ea52 100644
--- a/packages/react-components/src/components/cesium-map/layers/optimized-tile-requests.stories.tsx
+++ b/packages/react-components/src/components/cesium-map/layers/optimized-tile-requests.stories.tsx
@@ -106,7 +106,9 @@ const LayersContainer: React.FC = () => {
                 meta={{
                   id: 'Opaque Layer',
                   options: { ...optionsXYZOpaque },
-                  searchLayerPredicate: (layer: ImageryLayer): boolean => getImageryProviderUrl(layer) === optionsXYZOpaque.url,
+                  searchLayerPredicate: (layer: ImageryLayer): boolean => {
+                    return getImageryProviderUrl(layer) === optionsXYZOpaque.url;
+                  },
                 }}
                 rectangle={Rectangle.fromDegrees(...bbox(optionsXYZOpaque.footprint))}
                 options={optionsXYZOpaque}
diff --git a/packages/react-components/src/components/cesium-map/layers/wfs.layer.stories.tsx b/packages/react-components/src/components/cesium-map/layers/wfs.layer.stories.tsx
index 0e973928..00db39d0 100644
--- a/packages/react-components/src/components/cesium-map/layers/wfs.layer.stories.tsx
+++ b/packages/react-components/src/components/cesium-map/layers/wfs.layer.stories.tsx
@@ -283,6 +283,7 @@ const optionsPolygonParts = {
   labeling: {
     dataSourcePrefix: 'labels_',
     text: {
+      // eslint-disable-next-line no-template-curly-in-string
       pattern: '${imagingTimeEndUTC}\n v${productVersion} (${resolutionDegree})',
       fields: [
         {
diff --git a/packages/react-components/src/components/cesium-map/layers/wfs.layer.tsx b/packages/react-components/src/components/cesium-map/layers/wfs.layer.tsx
index 9227743a..6dc24504 100644
--- a/packages/react-components/src/components/cesium-map/layers/wfs.layer.tsx
+++ b/packages/react-components/src/components/cesium-map/layers/wfs.layer.tsx
@@ -598,6 +598,7 @@ export const CesiumWFSLayer: React.FC<ICesiumWFSLayer> = (props) => {
             const queryName = payload.query.split('(')[0].replace('query ', ''); //strip queryName
             await handleWfsResponse((wfsResponse as any)?.data[queryName], extent, offset, position);
           } else {
+            // eslint-disable-next-line no-throw-literal
             throw 'API as alternative service still not supported';
           }
         } else {
@@ -690,11 +691,14 @@ export const CesiumWFSLayer: React.FC<ICesiumWFSLayer> = (props) => {
       hasRunFetchRef.current = true;
     }
 
+    const wfsCacheRef = wfsCache.current;
+    const fetchMetadataRef = fetchMetadata.current;
+
     // Cleanup
     return () => {
       if (get(mapViewer, '_cesiumWidget') !== undefined) {
-        wfsCache.current.clear();
-        fetchMetadata.current.clear();
+        wfsCacheRef.clear();
+        fetchMetadataRef.clear();
         mapViewer.dataSources.remove(mapViewer.dataSources.getByName(`${labeling?.dataSourcePrefix}${wfsDataSource.name}`)[0]);
         mapViewer.dataSources.remove(wfsDataSource, true);
         if (dataLayerId !== undefined) {
diff --git a/packages/react-components/src/components/cesium-map/legend/legend-item.tsx b/packages/react-components/src/components/cesium-map/legend/legend-item.tsx
index 68df4fcb..099b8551 100644
--- a/packages/react-components/src/components/cesium-map/legend/legend-item.tsx
+++ b/packages/react-components/src/components/cesium-map/legend/legend-item.tsx
@@ -23,11 +23,6 @@ export const LegendItem: React.FC<LegendItemProps> = ({ legend: { legendImg, leg
     window.open(legendImg, '_blank');
   }, [legendImg]);
 
-  const handleLegendDocOpen = useCallback(() => {
-    // Open doc in a new tab.
-    window.open(legendDoc, '_blank');
-  }, [legendDoc]);
-
   const renderLayerName = useCallback(() => {
     const MAX_LAYER_NAME_LENGTH = 15;
 
diff --git a/packages/react-components/src/components/cesium-map/legend/legend-list.tsx b/packages/react-components/src/components/cesium-map/legend/legend-list.tsx
index f742121f..2ce15995 100644
--- a/packages/react-components/src/components/cesium-map/legend/legend-list.tsx
+++ b/packages/react-components/src/components/cesium-map/legend/legend-list.tsx
@@ -26,7 +26,6 @@ export const LegendList: React.FC<LegendListProps> = ({ legends, actionsTexts: {
     if (!legends.length) {
       return handleNoLegends();
     }
-
     return legends.map((legend, i) => {
       return <LegendItem key={`${legend.layer as string}_${i}`} legend={legend} docText={docText} imgText={imgText} />;
     });
diff --git a/packages/react-components/src/components/cesium-map/map.stories.tsx b/packages/react-components/src/components/cesium-map/map.stories.tsx
index 53af2f63..940897c6 100644
--- a/packages/react-components/src/components/cesium-map/map.stories.tsx
+++ b/packages/react-components/src/components/cesium-map/map.stories.tsx
@@ -1,5 +1,5 @@
 import { Feature } from 'geojson';
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import type { StoryFn, Meta } from '@storybook/react';
 import { ThemeProvider } from '@map-colonies/react-core';
 import { getValue } from '../utils/config';
diff --git a/packages/react-components/src/components/cesium-map/map.tsx b/packages/react-components/src/components/cesium-map/map.tsx
index d7c6545c..d88ae767 100644
--- a/packages/react-components/src/components/cesium-map/map.tsx
+++ b/packages/react-components/src/components/cesium-map/map.tsx
@@ -227,6 +227,17 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
     setMapViewRef(viewer as CesiumViewer);
   }, []);
 
+  useEffect(() => {
+    return () => {
+      if (mapViewRef && !mapViewRef.isDestroyed()) {
+        const canvas = mapViewRef.canvas;
+        mapViewRef.destroy();
+        const gl = canvas.getContext('webgl2') ?? canvas.getContext('webgl');
+        gl?.getExtension('WEBGL_lose_context')?.loseContext();
+      }
+    };
+  }, [mapViewRef]);
+
   const userExtend = (props as ViewerProps).extend;
   const mergedExtend = userExtend ? (Array.isArray(userExtend) ? [...userExtend, onViewerReady] : [userExtend, onViewerReady]) : onViewerReady;
 
@@ -428,7 +439,7 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
     };
 
     if (mapViewRef) {
-      mapViewRef.camera.moveEnd.addEventListener(() => {
+      const moveEndHandler = () => {
         if (mapViewRef.scene.mode !== SceneMode.MORPHING) {
           const camera = mapViewRef.camera;
 
@@ -442,16 +453,23 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
           };
           cameraStateRef.current = store;
         }
-      });
+      };
+
+      const removeMoveEndListener = mapViewRef.camera.moveEnd.addEventListener(moveEndHandler);
+      let removeTileLoadProgressListener: (() => void) | undefined;
+      let dataLayerUpdatedHandler: ((meta: any) => void) | undefined;
+
       if (showLoadingProgress) {
-        mapViewRef.scene.globe.tileLoadProgressEvent.addEventListener(function () {
+        const tileLoadProgressHandler = () => {
           if (mapViewRef.scene.globe.tilesLoaded) {
             setIsLoadingTiles(false);
           } else {
             setIsLoadingTiles(true);
           }
-        });
-        mapViewRef.layersManager?.addDataLayerUpdatedListener(() => {
+        };
+        removeTileLoadProgressListener = mapViewRef.scene.globe.tileLoadProgressEvent.addEventListener(tileLoadProgressHandler);
+
+        dataLayerUpdatedHandler = () => {
           let loading = false;
           mapViewRef.layersManager?.dataLayerList.forEach((dataLayer) => {
             if (
@@ -465,8 +483,21 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
             }
           });
           setIsLoadingDataLayer(loading);
-        });
+        };
+        mapViewRef.layersManager?.addDataLayerUpdatedListener(dataLayerUpdatedHandler);
       }
+
+      return () => {
+        try {
+          removeMoveEndListener();
+          removeTileLoadProgressListener?.();
+          if (dataLayerUpdatedHandler) {
+            mapViewRef.layersManager?.removeDataLayerUpdatedListener(dataLayerUpdatedHandler);
+          }
+        } catch (e) {
+          console.error('Cesium map listeners cleanup failed:', e);
+        }
+      };
     }
   }, [mapViewRef]);
 
@@ -532,6 +563,10 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
   };
 
   const bindCustomToolsToViewer = useCallback((): JSX.Element | undefined => {
+    const viewerContainer = mapViewRef?.container?.querySelector('.cesium-viewer');
+    if (!viewerContainer) {
+      return undefined;
+    }
     return (
       mapViewRef &&
       createPortal(
@@ -545,12 +580,16 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
           </Box>
           {showZoomButtons && <ZoomButtons />}
         </>,
-        document.querySelector('.cesium-viewer') as Element
+        viewerContainer
       )
     );
-  }, [mapViewRef, locale, projection, showMousePosition, showScale, isLoadingProgress]);
+  }, [mapViewRef, locale, projection, showMousePosition, showScale, isLoadingProgress, showCompass, showLoadingProgress, showZoomButtons, showZoomLevel]);
 
   const bindToolsToToolbar = useCallback((): JSX.Element | undefined => {
+    const toolbarContainer = mapViewRef?.container?.querySelector('.cesium-viewer-toolbar');
+    if (!toolbarContainer) {
+      return undefined;
+    }
     return (
       mapViewRef &&
       createPortal(
@@ -560,12 +599,16 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
           {props.showDebuggerTool && <DebuggerWidget locale={locale} />}
           <LegendWidget legendToggle={updateLegendToggle} />
         </>,
-        document.querySelector('.cesium-viewer-toolbar') as Element
+        toolbarContainer
       )
     );
-  }, [mapViewRef, locale, baseMaps, terrains]);
+  }, [mapViewRef, locale, baseMaps, terrains, props.geocoderPanel, props.showDebuggerTool]);
 
   const bindInspectorsToWidgets = useCallback((): JSX.Element | undefined => {
+    const widgetContainer = mapViewRef?.container?.querySelector('.cesium-widget');
+    if (!widgetContainer) {
+      return undefined;
+    }
     return (
       mapViewRef &&
       createPortal(
@@ -573,10 +616,10 @@ export const CesiumMap: React.FC<CesiumMapProps> = (props) => {
           {showActiveLayersTool && <ActiveLayersWidget locale={locale} />}
           {viewState?.showCesiumInspector && <InspectorTool />}
         </Box>,
-        document.querySelector('.cesium-widget') as Element
+        widgetContainer
       )
     );
-  }, [mapViewRef, locale, viewState?.showCesiumInspector]);
+  }, [mapViewRef, locale, viewState?.showCesiumInspector, showActiveLayersTool]);
 
   return (
     <ThemeProvider id="cesiumTheme" options={themeCesium}>
diff --git a/packages/react-components/src/components/cesium-map/terrain-providers/terrain-provider-heights-tool.stories.tsx b/packages/react-components/src/components/cesium-map/terrain-providers/terrain-provider-heights-tool.stories.tsx
index 2f52ef09..9225a58b 100644
--- a/packages/react-components/src/components/cesium-map/terrain-providers/terrain-provider-heights-tool.stories.tsx
+++ b/packages/react-components/src/components/cesium-map/terrain-providers/terrain-provider-heights-tool.stories.tsx
@@ -72,13 +72,6 @@ const TerrainProviderSelector: React.FC<ITerrainProviderSelectorProps> = ({ terr
   return (
     <div>
       <select
-        style={{
-          display: 'block',
-          marginTop: '8px',
-          height: '32px',
-          maxHeight: '32px',
-          width: 'auto',
-        }}
         defaultValue={terrainProviderList[0].id}
         onChange={(evt): void => {
           const selected = terrainProviderList.find((item) => item.id === evt.target.value);
diff --git a/packages/react-components/src/components/cesium-map/tools/scale-tracker.tool.tsx b/packages/react-components/src/components/cesium-map/tools/scale-tracker.tool.tsx
index 06f580c2..054f83a4 100644
--- a/packages/react-components/src/components/cesium-map/tools/scale-tracker.tool.tsx
+++ b/packages/react-components/src/components/cesium-map/tools/scale-tracker.tool.tsx
@@ -118,6 +118,7 @@ export const ScaleTrackerTool: React.FC<RScaleTrackerToolProps> = (props) => {
     return (): void => {
       try {
         /* eslint-disable @typescript-eslint/no-unnecessary-condition*/
+        // eslint-disable-next-line eqeqeq
         if (get(mapViewer, '_cesiumWidget') != undefined) {
           mapViewer.camera.moveEnd.removeEventListener(setFromEvent);
         }
diff --git a/packages/react-components/src/components/circular-progress-bar/circular-progress-bar.stories.tsx b/packages/react-components/src/components/circular-progress-bar/circular-progress-bar.stories.tsx
index d0015aaf..0d92565d 100644
--- a/packages/react-components/src/components/circular-progress-bar/circular-progress-bar.stories.tsx
+++ b/packages/react-components/src/components/circular-progress-bar/circular-progress-bar.stories.tsx
@@ -6,7 +6,7 @@ import { Box } from '../box';
 import { CircularProgressBar } from './circular-progress-bar';
 
 const story = {
-  title: 'Circular Progress Bar',
+  title: 'Components/Circular Progress Bar',
   component: CircularProgressBar,
 };
 
diff --git a/packages/react-components/src/components/date-picker/date-picker.stories.tsx b/packages/react-components/src/components/date-picker/date-picker.stories.tsx
index f29b5f5e..29299cb3 100644
--- a/packages/react-components/src/components/date-picker/date-picker.stories.tsx
+++ b/packages/react-components/src/components/date-picker/date-picker.stories.tsx
@@ -8,7 +8,7 @@ import { DateTimePicker } from './date-picker';
 const TODAY = new Date();
 
 const meta = {
-  title: 'Date Picker',
+  title: 'Components/Date Picker',
   component: DateTimePicker,
 };
 export default meta;
diff --git a/packages/react-components/src/components/date-range-picker-with-presets/date-range-picker-with-presets.stories.tsx b/packages/react-components/src/components/date-range-picker-with-presets/date-range-picker-with-presets.stories.tsx
index 1e0e3745..52ead093 100644
--- a/packages/react-components/src/components/date-range-picker-with-presets/date-range-picker-with-presets.stories.tsx
+++ b/packages/react-components/src/components/date-range-picker-with-presets/date-range-picker-with-presets.stories.tsx
@@ -4,7 +4,7 @@ import './styles';
 import { endOfWeek, startOfMonth, startOfWeek, startOfYear, subWeeks } from 'date-fns';
 
 const meta: Meta<typeof DateRangePickerWithPresets> = {
-  title: 'Date Range Picker With Presets',
+  title: 'Components/Date Range Picker With Presets',
   component: DateRangePickerWithPresets,
 };
 
diff --git a/packages/react-components/src/components/date-range-picker/date-range-picker.stories.tsx b/packages/react-components/src/components/date-range-picker/date-range-picker.stories.tsx
index 28d6342e..cdf40ab6 100644
--- a/packages/react-components/src/components/date-range-picker/date-range-picker.stories.tsx
+++ b/packages/react-components/src/components/date-range-picker/date-range-picker.stories.tsx
@@ -6,7 +6,7 @@ import { DateTimeRangePicker } from './date-range-picker';
 import { DateTimeRangePickerFormControl } from './date-range-picker.form-control';
 
 const story = {
-  title: 'Date Range Picker',
+  title: 'Components/Date Range Picker',
   component: DateTimeRangePicker,
 };
 
diff --git a/packages/react-components/src/components/file-picker/file-picker.stories.tsx b/packages/react-components/src/components/file-picker/file-picker.stories.tsx
index 39010a47..3840a266 100644
--- a/packages/react-components/src/components/file-picker/file-picker.stories.tsx
+++ b/packages/react-components/src/components/file-picker/file-picker.stories.tsx
@@ -11,7 +11,7 @@ import { FileActionData, FilePicker, FileArray, FileData, FileHelper, FilePicker
 import FsMap from './fs-map.json';
 
 const story = {
-  title: 'File Picker',
+  title: 'Components/File Picker',
   component: FilePicker,
 };
 
diff --git a/packages/react-components/src/components/multi-selection/multi-selection.stories.tsx b/packages/react-components/src/components/multi-selection/multi-selection.stories.tsx
index 97ff9be3..62a80910 100644
--- a/packages/react-components/src/components/multi-selection/multi-selection.stories.tsx
+++ b/packages/react-components/src/components/multi-selection/multi-selection.stories.tsx
@@ -74,7 +74,7 @@ const customStyles = {
 };
 
 const meta = {
-  title: 'Multi Selection',
+  title: 'Components/Multi Selection',
   component: MultiSelection,
 };
 export default meta;
diff --git a/packages/react-components/src/components/ol-map/source/stories/xyz.stories.tsx b/packages/react-components/src/components/ol-map/source/stories/xyz.stories.tsx
index 8c167fb1..eb63e7d3 100644
--- a/packages/react-components/src/components/ol-map/source/stories/xyz.stories.tsx
+++ b/packages/react-components/src/components/ol-map/source/stories/xyz.stories.tsx
@@ -5,7 +5,7 @@ import { TileLayer } from '../../layers/tile-layer';
 import { getXYZOptions, TileXYZ } from '../xyz';
 
 const xyzOptions = getXYZOptions({
-  url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png' + '?apikey=0e6fc415256d4fbb9b5166a718591d71',
+  url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=0e6fc415256d4fbb9b5166a718591d71',
 });
 
 const mapDivStyle = {
diff --git a/packages/react-components/src/components/smart-table/stories/SmartTable.stories.tsx b/packages/react-components/src/components/smart-table/stories/SmartTable.stories.tsx
index f95ebdbb..cf0eaffa 100644
--- a/packages/react-components/src/components/smart-table/stories/SmartTable.stories.tsx
+++ b/packages/react-components/src/components/smart-table/stories/SmartTable.stories.tsx
@@ -4,7 +4,7 @@ import { SmartTable, CellMetadata } from '..';
 import { CSFStory } from '../../utils/story';
 
 const meta = {
-  title: 'Smart Table',
+  title: 'Components/Smart Table',
   component: SmartTable,
 };
 export default meta;