diff --git a/packages/.eslintrc b/packages/.eslintrc
index 6f45fd9dd1d..58741c355ff 100644
--- a/packages/.eslintrc
+++ b/packages/.eslintrc
@@ -74,6 +74,7 @@
       {
         "endOfLine": "auto"
       }
-    ]
+    ],
+    "require-await": 1 // warning
   }
 }
diff --git a/packages/geoview-basemap-panel/src/basemap-panel-style.ts b/packages/geoview-basemap-panel/src/basemap-panel-style.ts
new file mode 100644
index 00000000000..8d4e13646b4
--- /dev/null
+++ b/packages/geoview-basemap-panel/src/basemap-panel-style.ts
@@ -0,0 +1,81 @@
+/* @ts-expect-error there is no mui style in this package */
+export const getSxClasses = (theme) => ({
+  basemapCard: {
+    '& .MuiCard-root': {
+      backgroundColor: theme.palette.grey.A700,
+      color: theme.palette.primary.light,
+      display: 'flex',
+      flexDirection: 'column',
+      backgroundClip: 'padding-box',
+      border: '1px solid rgba(255,255,255,0.25)',
+      borderRadius: '6px',
+      boxShadow: 'none',
+      marginBottom: '16px',
+      transition: 'all 0.3s ease-in-out',
+      '&:last-child': {
+        marginBottom: '0px',
+      },
+    },
+    '& .MuiCardHeader-root': {
+      backgroundColor: `${theme.palette.grey.A700} !important`,
+      color: theme.basemapPanel.header,
+      fontSize: 14,
+      fontWeight: 400,
+      margin: 0,
+      padding: '0 12px',
+      height: 60,
+      width: '100%',
+      order: 2,
+    },
+    '& .MuiCardContent-root': {
+      order: 1,
+      height: 190,
+      position: 'relative',
+      padding: 0,
+      '&:last-child': {
+        padding: 0,
+      },
+      '& .basemapCardThumbnail': {
+        position: 'absolute',
+        height: '100%',
+        width: '100%',
+        objectFit: 'cover',
+        top: 0,
+        left: 0,
+      },
+      '& .basemapCardThumbnailOverlay': {
+        display: 'block',
+        height: '100%',
+        width: '100%',
+        position: 'absolute',
+        backgroundColor: theme.basemapPanel.overlayDefault,
+        transition: 'all 0.3s ease-in-out',
+      },
+    },
+    '&:hover': {
+      cursor: 'pointer',
+      borderColor: theme.basemapPanel.borderHover,
+      '& .MuiCardContent-root': {
+        '& .basemapCardThumbnailOverlay': {
+          backgroundColor: theme.basemapPanel.overlayHover,
+        },
+      },
+    },
+    '&.active': {
+      borderColor: theme.basemapPanel.borderActive,
+      '& .MuiCardContent-root': {
+        '& .basemapCardThumbnailOverlay': {
+          backgroundColor: theme.basemapPanel.overlayActive,
+        },
+      },
+      '&:hover': {
+        borderColor: 'rgba(255,255,255,0.75)',
+        '& .MuiCardContent-root': {
+          '& .basemapCardThumbnailOverlay': {
+            backgroundColor: 'rgba(0,0,0,0)',
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/packages/geoview-basemap-panel/src/basemap-panel.tsx b/packages/geoview-basemap-panel/src/basemap-panel.tsx
index 6eaf281c18c..687dcf5375d 100644
--- a/packages/geoview-basemap-panel/src/basemap-panel.tsx
+++ b/packages/geoview-basemap-panel/src/basemap-panel.tsx
@@ -10,6 +10,7 @@ import {
   TypeBasemapOptions,
   TypeValidMapProjectionCodes,
 } from 'geoview-core';
+import { getSxClasses } from './basemap-panel-style';
 
 const w = window as TypeWindow;
 
@@ -25,7 +26,7 @@ export function BasemapPanel(props: BaseMapPanelProps): JSX.Element {
   const myMap = cgpv.api.maps[mapId];
 
   const { api, ui, react } = cgpv;
-  const { Select, Card } = ui.elements;
+  const { Select, Card, Box } = ui.elements;
 
   const { useState, useEffect } = react;
 
@@ -33,85 +34,9 @@ export function BasemapPanel(props: BaseMapPanelProps): JSX.Element {
   const [activeBasemapId, setActiveBasemapId] = useState<string>('');
   const [canSwichProjection] = useState(config.canSwichProjection);
 
-  const useStyles = ui.makeStyles((theme) => ({
-    basemapCard: {
-      backgroundColor: theme.palette.grey.A700,
-      color: theme.palette.primary.light,
-      display: 'flex',
-      flexDirection: 'column',
-      backgroundClip: 'padding-box',
-      border: `1px solid ${theme.basemapPanel.borderDefault}`,
-      borderRadius: 6,
-      boxShadow: 'none',
-      marginBottom: 16,
-      transition: 'all 0.3s ease-in-out',
-      '&:last-child': {
-        marginBottom: 0,
-      },
-      '& .MuiCardHeader-root': {
-        backgroundColor: theme.palette.grey.A700,
-        color: theme.basemapPanel.header,
-        fontSize: 14,
-        fontWeight: 400,
-        margin: 0,
-        padding: '0 12px',
-        height: 60,
-        width: '100%',
-        order: 2,
-      },
-      '& .MuiCardContent-root': {
-        order: 1,
-        height: 190,
-        position: 'relative',
-        padding: 0,
-        '&:last-child': {
-          padding: 0,
-        },
-        '& .basemapCardThumbnail': {
-          position: 'absolute',
-          height: '100%',
-          width: '100%',
-          objectFit: 'cover',
-          top: 0,
-          left: 0,
-        },
-        '& .basemapCardThumbnailOverlay': {
-          display: 'block',
-          height: '100%',
-          width: '100%',
-          position: 'absolute',
-          backgroundColor: theme.basemapPanel.overlayDefault,
-          transition: 'all 0.3s ease-in-out',
-        },
-      },
-      '&:hover': {
-        cursor: 'pointer',
-        borderColor: theme.basemapPanel.borderHover,
-        '& .MuiCardContent-root': {
-          '& .basemapCardThumbnailOverlay': {
-            backgroundColor: theme.basemapPanel.overlayHover,
-          },
-        },
-      },
-      '&.active': {
-        borderColor: theme.basemapPanel.borderActive,
-        '& .MuiCardContent-root': {
-          '& .basemapCardThumbnailOverlay': {
-            backgroundColor: theme.basemapPanel.overlayActive,
-          },
-        },
-        '&:hover': {
-          borderColor: 'rgba(255,255,255,0.75)',
-          '& .MuiCardContent-root': {
-            '& .basemapCardThumbnailOverlay': {
-              backgroundColor: 'rgba(0,0,0,0)',
-            },
-          },
-        },
-      },
-    },
-  }));
-  const classes = useStyles();
+  const theme = ui.useTheme();
+
+  const sxClasses = getSxClasses(theme);
 
   // TODO: change the path for getting projection on schema refactor
   const projections: number[] =
@@ -220,7 +145,7 @@ export function BasemapPanel(props: BaseMapPanelProps): JSX.Element {
   }, []);
 
   return (
-    <div>
+    <Box sx={sxClasses.basemapCard}>
       {canSwichProjection && (
         <Select
           fullWidth
@@ -247,7 +172,6 @@ export function BasemapPanel(props: BaseMapPanelProps): JSX.Element {
         return (
           <Card
             tabIndex={0}
-            classes={{ root: classes.basemapCard }}
             className={basemap.basemapId === activeBasemapId ? 'active' : ''}
             onClick={() => setBasemap(basemap.basemapId as string)}
             onKeyPress={() => setBasemap(basemap.basemapId as string)}
@@ -269,6 +193,6 @@ export function BasemapPanel(props: BaseMapPanelProps): JSX.Element {
           />
         );
       })}
-    </div>
+    </Box>
   );
 }
diff --git a/packages/geoview-core/public/index.html b/packages/geoview-core/public/index.html
index 26636281702..0be79526be0 100644
--- a/packages/geoview-core/public/index.html
+++ b/packages/geoview-core/public/index.html
@@ -31,7 +31,7 @@ <h4>Basic Maps</h4>
     <h4>Basic Raw Components</h4>
     <a class="page-link" href="./raw-feature-info-1.html">Basic Feature Info (in footer panel)</a>
     <a class="page-link" href="./raw-data-table.html">Basic Data Table</a>
-    <a class="page-link" href="./raw-legend-2.html">Basic Legend</a>
+    <a class="page-link" href="./raw-legend-2.html">Basic Legend(2)</a>
     <h4>Basic Loading</h4>
     <a class="page-link" href="./default-config.html">Default Configuration</a>
     <a class="page-link"
@@ -65,6 +65,7 @@ <h4>Interactions</h4>
     <a class="page-link" href="./inter-modify.html">Modify</a>
     <a class="page-link" href="./inter-translate.html">Translate</a>
     <a class="page-link" href="./inter-snap.html">Snap</a>
+    <a class="page-link" href="./inter-extent.html">Extent</a>
     <h4>Other</h4>
     <a class="page-link" href="./responsive_page.html">Responsive Page</a>
     <a class="page-link" href="./load-test.html">Performance Test</a>
diff --git a/packages/geoview-core/public/locales/en/translation.json b/packages/geoview-core/public/locales/en/translation.json
index 02d51fb771a..a480445c141 100644
--- a/packages/geoview-core/public/locales/en/translation.json
+++ b/packages/geoview-core/public/locales/en/translation.json
@@ -1,7 +1,8 @@
 {
   "general": {
     "close": "Close",
-    "open": "Open"
+    "open": "Open",
+    "layers": "Layers"
   },
   "mapnav": {
     "arianavbar": "vertical button group for map navigation",
@@ -54,12 +55,14 @@
     "toggle_opacity": "Toggle Opacity",
     "zoom_to": "Zoom to Layer",
     "overview_title": "Legend Overview",
+    "bold_selection": "Selection: ",
     "add_layer": "Add Layer",
     "selected_legend": "Selected Legend",
     "sort_layers": "Sort Layers",
     "selected_Layers": "An overview of currrently selected layers",
     "re-arrange": "re-arrange",
-    "categories_title": "Categories"
+    "categories_title" : "Categories",
+    "items_available": "items available"
   },
   "details": {
     "zoom_to": "Zoom to feature",
diff --git a/packages/geoview-core/public/locales/fr/translation.json b/packages/geoview-core/public/locales/fr/translation.json
index bb248d99ad3..6441a25c6e9 100644
--- a/packages/geoview-core/public/locales/fr/translation.json
+++ b/packages/geoview-core/public/locales/fr/translation.json
@@ -1,7 +1,8 @@
 {
   "general": {
     "close": "Fermer",
-    "open": "Ouvrir"
+    "open": "Ouvrir",
+    "layers": "Couches"
   },
   "mapnav": {
     "arianavbar": "groupe de buttons vertical pour navigation sur la carte",
diff --git a/packages/geoview-core/public/templates/codedoc.js b/packages/geoview-core/public/templates/codedoc.js
index 4e07c189d84..bbb5b2f8a6a 100644
--- a/packages/geoview-core/public/templates/codedoc.js
+++ b/packages/geoview-core/public/templates/codedoc.js
@@ -107,6 +107,7 @@ function createCollapsible() {
 function getAllInteractionEvents(api) {
   return [
     api.eventNames.INTERACTION.EVENT_SELECTED,
+    api.eventNames.INTERACTION.EVENT_EXTENT,
     api.eventNames.INTERACTION.EVENT_DRAW_STARTED,
     api.eventNames.INTERACTION.EVENT_DRAW_ENDED,
     api.eventNames.INTERACTION.EVENT_MODIFY_STARTED,
diff --git a/packages/geoview-core/public/templates/inter-extent.html b/packages/geoview-core/public/templates/inter-extent.html
new file mode 100644
index 00000000000..90459437c19
--- /dev/null
+++ b/packages/geoview-core/public/templates/inter-extent.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>
+    <%= htmlWebpackPlugin.options.title %>
+  </title>
+  <link rel="shortcut icon" href="./favicon.ico" />
+  <meta name="msapplication-TileColor" content="#da532c" />
+  <meta name="msapplication-config" content="./img/browserconfig.xml" />
+  <meta name="theme-color" content="#ffffff" />
+  <meta name="msapplication-TileColor" content="#da532c" />
+  <meta name="theme-color" content="#ffffff" />
+  <link href="https://fonts.googleapis.com/css?family=Roboto|Montserrat:200,300,400,900|Merriweather" rel="stylesheet"
+    type="text/css" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+  <link rel="stylesheet" href="css/style.css" />
+  <script src="codedoc.js"></script>
+</head>
+
+<body>
+  <div class="header-table">
+    <table>
+      <tbody>
+        <tr>
+          <td><img class="header-logo" alt="logo" src="./img/Logo.png" /></td>
+          <td class="header-title">
+            <h1><strong>Extent</strong></h1>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table>
+      <tbody>
+        <tr>
+          <td>
+            <ol>
+              <a href="./index.html">Main</a>
+              <li><a href="#EXTENT1">Extent (simple case)</a></li>
+            </ol>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <table>
+      <tbody>
+        <tr>
+          <td>This page is used to showcase different Extent functionalities</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+   <!-- EXTENT -->
+   <div class="map-title-holder">
+    <h4 id="EXTENT1">1. Extent (simple case)</h4><a class="ref-link" href="#top">Top</a>
+  </div>
+  <div>This example shows how to use an Extent interaction to draw a modifiable extent. Use Shift-Drag to draw an extent. Shift-Drag on the corners or edges of the extent to resize it. Shift-Click off the extent to remove it.</div>
+
+  <div style="position:relative;">
+    <div class="logs-container">
+      <div class="logs-container-title">API EVENTS LOGS</div>
+      <div class="logs-container-sub-title">(see console for more)</div>
+      <div id="LOGS1"></div>
+    </div>
+    <div id="MAP1" class="llwp-map" data-lang="en" data-config="{
+            'map': {
+              'interaction': 'dynamic',
+              'viewSettings': {
+                    'zoom': 4,
+                    'minZoom': 2,
+                    'maxZoom': 12,
+                    'center': [-100, 60],
+                    'projection': 3978
+                },
+                'basemapOptions': {
+                    'basemapId': 'simple',
+                    'shaded': true,
+                    'labeled': false
+                }
+            },
+            'theme': 'dark',
+            'corePackages': [],
+            'suportedLanguages': ['en']
+          }"></div>
+  </div>
+  <hr />
+  <button type="button" class="collapsible">Configuration Snippet</button>
+  <pre id="MAP1CS" class="panel"></pre>
+  <hr />
+  <button type="button" class="collapsible">Code Snippet</button>
+  <pre id="codeSnippet" class="panel"></pre>
+  <!-- /Extent -->
+
+  <script>
+    let map1;
+    function initMap1(map) {
+      // Keep reference
+      map1 = map;
+
+      // Create geometry group which will handle the drawing and set it as active
+      const groupKey = 'extentGroup';
+      const geomGrp = map.layer.geometry.createGeometryGroup(groupKey);
+
+      // Add dummy shapes
+      addDefaultShapes(map, groupKey);
+
+      // Init extent interactions
+      const extent1 = map.initExtentInteractions();
+    }
+
+    // initialize cgpv and api events, a callback is optional, used if calling api's after the rendering is ready
+    cgpv.init(function (mapId) {
+      // If all maps initialized
+      if (mapId === 'allMaps') {
+        console.log('api is ready');
+
+        // Listen to the map loaded event
+        const mapId1 = "MAP1";
+        cgpv.api.event.on(
+          cgpv.api.eventNames.MAP.EVENT_MAP_LOADED,
+            (payload) => {
+              // Init map
+              initMap1(cgpv.api.maps[mapId1]);
+              // Wire the logs
+              wireLogs(cgpv.api, mapId1, 'LOGS1');
+            },
+            mapId1
+        );
+      }
+
+      //create snippets
+      createCodeSnippet();
+      createConfigSnippet();
+    });
+
+  </script>
+</body>
+</html>
diff --git a/packages/geoview-core/src/api/events/constants/interaction-constants.ts b/packages/geoview-core/src/api/events/constants/interaction-constants.ts
index 60f6328a447..7cb53994733 100644
--- a/packages/geoview-core/src/api/events/constants/interaction-constants.ts
+++ b/packages/geoview-core/src/api/events/constants/interaction-constants.ts
@@ -8,6 +8,7 @@ import { EventStringId } from '../event-types';
 /** Valid keys for the INTERACTION category */
 export type InteractionEventKey =
   | 'EVENT_SELECTED'
+  | 'EVENT_EXTENT'
   | 'EVENT_DRAW_STARTED'
   | 'EVENT_DRAW_ENDED'
   | 'EVENT_DRAW_ABORTED'
@@ -23,6 +24,11 @@ export const INTERACTION: Record<InteractionEventKey, EventStringId> = {
    */
   EVENT_SELECTED: 'interaction/select_selected',
 
+  /**
+   * Event is triggered when a select notification opens
+   */
+  EVENT_EXTENT: 'interaction/extent_selected',
+
   /**
    * Event triggered when drawing has started
    */
diff --git a/packages/geoview-core/src/api/events/event-types.ts b/packages/geoview-core/src/api/events/event-types.ts
index 03c15e2b2cf..146801ad55b 100644
--- a/packages/geoview-core/src/api/events/event-types.ts
+++ b/packages/geoview-core/src/api/events/event-types.ts
@@ -85,6 +85,7 @@ export type EventStringId =
   | 'interaction/draw_started'
   | 'interaction/draw_ended'
   | 'interaction/draw_aborted'
+  | 'interaction/extent_selected'
   | 'interaction/modify_started'
   | 'interaction/modify_ended'
   | 'interaction/select_selected'
diff --git a/packages/geoview-core/src/api/events/payloads/index.ts b/packages/geoview-core/src/api/events/payloads/index.ts
index 531b2eebd41..fd17cd3c7f9 100644
--- a/packages/geoview-core/src/api/events/payloads/index.ts
+++ b/packages/geoview-core/src/api/events/payloads/index.ts
@@ -12,6 +12,7 @@ export * from './get-feature-info-payload';
 export * from './get-legends-payload';
 export * from './in-keyfocus-payload';
 export * from './inter-draw-payload';
+export * from './inter-extent-payload';
 export * from './inter-modify-payload';
 export * from './inter-select-payload';
 export * from './inter-translate-payload';
diff --git a/packages/geoview-core/src/api/events/payloads/inter-extent-payload.ts b/packages/geoview-core/src/api/events/payloads/inter-extent-payload.ts
new file mode 100644
index 00000000000..04a3b325431
--- /dev/null
+++ b/packages/geoview-core/src/api/events/payloads/inter-extent-payload.ts
@@ -0,0 +1,58 @@
+import { ExtentEvent as OLExtentEvent } from 'ol/interaction/Extent';
+
+import { PayloadBaseClass } from './payload-base-class';
+
+import { EventStringId, EVENT_NAMES } from '../event-types';
+
+/** Valid events that can create ExtentPayload */
+const validEvents: EventStringId[] = [EVENT_NAMES.INTERACTION.EVENT_EXTENT];
+
+/**
+ * type guard function that redefines a PayloadBaseClass as a ExtentPayload
+ * if the event attribute of the verifyIfPayload parameter is valid. The type ascention
+ * applies only to the true block of the if clause.
+ *
+ * @param {PayloadBaseClass} verifyIfPayload object to test in order to determine if the type ascention is valid
+ * @returns {boolean} returns true if the payload is valid
+ */
+export const payloadIsAnExtent = (verifyIfPayload: PayloadBaseClass): verifyIfPayload is ExtentPayload => {
+  return validEvents.includes(verifyIfPayload?.event);
+};
+
+/**
+ * Class definition for ExtentPayload
+ *
+ * @exports
+ * @class ExtentPayload
+ */
+export class ExtentPayload extends PayloadBaseClass {
+  extentInfo: OLExtentEvent;
+
+  /**
+   * Constructor for the class
+   *
+   * @param {EventStringId} event the event identifier for which the payload is constructed
+   * @param {string | null} handlerName the handler Name
+   * @param {OLExtentEvent} extentInfo the extent information carried by the payload
+   *
+   */
+  constructor(event: EventStringId, handlerName: string | null, extentInfo: OLExtentEvent) {
+    if (!validEvents.includes(event)) throw new Error(`ExtentPayload can't be instanciated for event of type ${event}`);
+    super(event, handlerName);
+    this.extentInfo = extentInfo;
+  }
+}
+
+/**
+ * Helper function used to instanciate a ExtentPayload object. This function
+ * avoids the "new ExtentPayload" syntax.
+ *
+ * @param {EventStringId} event the event identifier for which the payload is constructed
+ * @param {string | null} handlerName the handler Name
+ * @param {OLExtentEvent} extent the extent information carried by the payload
+ *
+ * @returns {ExtentPayload} the ExtentPayload object created
+ */
+export const extentPayload = (event: EventStringId, handlerName: string | null, extent: OLExtentEvent): ExtentPayload => {
+  return new ExtentPayload(event, handlerName, extent);
+};
diff --git a/packages/geoview-core/src/api/plugin/plugin-types.ts b/packages/geoview-core/src/api/plugin/plugin-types.ts
index 9998d6c85b4..93cdf3a1a75 100644
--- a/packages/geoview-core/src/api/plugin/plugin-types.ts
+++ b/packages/geoview-core/src/api/plugin/plugin-types.ts
@@ -1,6 +1,5 @@
 import { AnySchemaObject } from 'ajv';
 import React from 'react';
-import makeStyles from '@mui/styles/makeStyles';
 import { TypeJsonObject, TypeJsonValue } from '@/core/types/global-types';
 import { API } from '../api';
 
@@ -17,7 +16,6 @@ export type TypePluginStructure = {
   translate: TypeJsonValue;
   translations: TypeJsonObject;
   configObj: TypeJsonObject;
-  makeStyles: typeof makeStyles;
   schema?: () => AnySchemaObject;
   defaultConfig?: () => TypeJsonObject;
   added?: () => void;
diff --git a/packages/geoview-core/src/api/plugin/plugin.ts b/packages/geoview-core/src/api/plugin/plugin.ts
index da3b4c8e527..1682e547455 100644
--- a/packages/geoview-core/src/api/plugin/plugin.ts
+++ b/packages/geoview-core/src/api/plugin/plugin.ts
@@ -1,3 +1,4 @@
+import { useTheme } from '@mui/material/styles';
 import React from 'react';
 
 import i18next from 'i18next';
@@ -5,8 +6,6 @@ import * as translate from 'react-i18next';
 
 import Ajv from 'ajv';
 
-import makeStyles from '@mui/styles/makeStyles';
-
 import { showError } from '@/core/utils/utilities';
 import { MapViewer } from '@/geo/map/map-viewer';
 
@@ -36,7 +35,7 @@ export class Plugin {
    * @param {string} pluginId the package id to load
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  loadScript = async (pluginId: string): Promise<any> => {
+  loadScript = (pluginId: string): Promise<any> => {
     return new Promise((resolve) => {
       const existingScript = document.getElementById(pluginId);
 
@@ -180,7 +179,7 @@ export class Plugin {
           react: { value: React },
           props: { value: props !== undefined && props !== null ? props : {} },
           translate: { value: translate },
-          makeStyles: { value: makeStyles },
+          useTheme: { value: useTheme },
           configObj: { value: pluginConfigObj },
         });
 
diff --git a/packages/geoview-core/src/app.tsx b/packages/geoview-core/src/app.tsx
index 9ea09da6895..0dbc2d32d5e 100644
--- a/packages/geoview-core/src/app.tsx
+++ b/packages/geoview-core/src/app.tsx
@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next';
 
 import { useMediaQuery } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
-import makeStyles from '@mui/styles/makeStyles';
 
 import 'ol/ol.css';
 import '@/ui/style/style.css';
@@ -94,7 +93,7 @@ export function addReloadListener(mapId: string) {
  * @param {Element} mapDiv The ma div to initialise
  * @param {string} mapConfig a new config passed in from the function call
  */
-export async function initMapDivFromFunctionCall(mapDiv: HTMLElement, mapConfig: string) {
+export function initMapDivFromFunctionCall(mapDiv: HTMLElement, mapConfig: string): void {
   mapDiv.classList.add('llwp-map');
   // render the map with the config
   reactRoot[mapDiv.id] = createRoot(mapDiv!);
@@ -155,7 +154,6 @@ export const cgpv: types.TypeCGPV = {
   ui: {
     useTheme,
     useMediaQuery,
-    makeStyles,
     elements: UI,
   },
   useTranslation,
diff --git a/packages/geoview-core/src/core/components/app-bar/app-bar-style.ts b/packages/geoview-core/src/core/components/app-bar/app-bar-style.ts
new file mode 100644
index 00000000000..6d566a7698d
--- /dev/null
+++ b/packages/geoview-core/src/core/components/app-bar/app-bar-style.ts
@@ -0,0 +1,70 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  appBar: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    minWidth: 64,
+    zIndex: theme.zIndex.appBar,
+    pointerEvents: 'all',
+    backgroundColor: theme.appBar.background,
+    border: theme.appBar.border,
+  },
+  appBarList: {
+    width: 60,
+    '& li': {
+      backgroundColor: 'transparent',
+      justifyContent: 'center',
+      margin: '16px 0',
+      padding: 0,
+      '&:hover': {
+        backgroundColor: 'transparent',
+        color: theme.palette.primary.light,
+      },
+    },
+    '& hr': {
+      width: '80%',
+      marginLeft: '7px',
+    },
+  },
+
+  appBarButtons: {
+    borderRightColor: theme.appBar.border,
+    borderRightWidth: 1,
+    borderRightStyle: 'solid',
+    width: 64,
+  },
+  appBarButton: {
+    backgroundColor: theme.appBar.btnDefaultBg,
+    color: theme.palette.primary.light,
+    height: 44,
+    width: 44,
+    transition: 'background-color 0.3s ease-in-out',
+    '&:hover': {
+      backgroundColor: theme.appBar.btnHoverBg,
+      color: theme.palette.primary.light,
+    },
+    '&:focus': {
+      backgroundColor: theme.appBar.btnFocusBg,
+      color: theme.palette.primary.light,
+    },
+    '&:active': {
+      backgroundColor: theme.appBar.btnActiveBg,
+      color: theme.palette.primary.light,
+    },
+    '&.active': {
+      backgroundColor: theme.appBar.btnActiveBg,
+      color: theme.palette.background.paper,
+    },
+    '& .MuiSvgIcon-root': {
+      height: 20,
+      width: 20,
+    },
+  },
+  versionButtonDiv: {
+    position: 'absolute',
+    bottom: 0,
+  },
+  appBarPanels: {},
+});
diff --git a/packages/geoview-core/src/core/components/app-bar/app-bar.tsx b/packages/geoview-core/src/core/components/app-bar/app-bar.tsx
index ed99823af7b..b7b3e8ee7da 100644
--- a/packages/geoview-core/src/core/components/app-bar/app-bar.tsx
+++ b/packages/geoview-core/src/core/components/app-bar/app-bar.tsx
@@ -1,6 +1,5 @@
 import { useState, useRef, useEffect, useCallback, Fragment, useContext, SetStateAction, Dispatch } from 'react';
-
-import makeStyles from '@mui/styles/makeStyles';
+import { Box, useTheme } from '@mui/material';
 
 import { List, ListItem, Panel, IconButton } from '@/ui';
 
@@ -17,75 +16,7 @@ import Geolocator from './buttons/geolocator';
 import Notifications from '@/core/components/notifications/notifications';
 import Version from './buttons/version';
 import ExportModal from '../export/export-modal';
-
-const useStyles = makeStyles((theme) => ({
-  appBar: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    minWidth: 64,
-    zIndex: theme.zIndex.appBar,
-    pointerEvents: 'all',
-    backgroundColor: theme.appBar.background,
-    border: theme.appBar.border,
-  },
-  appBarList: {
-    width: 60,
-    '& li': {
-      backgroundColor: 'transparent',
-      justifyContent: 'center',
-      margin: '16px 0',
-      padding: 0,
-      '&:hover': {
-        backgroundColor: 'transparent',
-        color: theme.palette.primary.light,
-      },
-    },
-    '& hr': {
-      width: '80%',
-      marginLeft: '7px',
-    },
-  },
-
-  appBarButtons: {
-    borderRightColor: theme.appBar.border,
-    borderRightWidth: 1,
-    borderRightStyle: 'solid',
-    width: 64,
-  },
-  appBarButton: {
-    backgroundColor: theme.appBar.btnDefaultBg,
-    color: theme.palette.primary.light,
-    height: 44,
-    width: 44,
-    transition: 'background-color 0.3s ease-in-out',
-    '&:hover': {
-      backgroundColor: theme.appBar.btnHoverBg,
-      color: theme.palette.primary.light,
-    },
-    '&:focus': {
-      backgroundColor: theme.appBar.btnFocusBg,
-      color: theme.palette.primary.light,
-    },
-    '&:active': {
-      backgroundColor: theme.appBar.btnActiveBg,
-      color: theme.palette.primary.light,
-    },
-    '&.active': {
-      backgroundColor: theme.appBar.btnActiveBg,
-      color: theme.palette.background.paper,
-    },
-    '& .MuiSvgIcon-root': {
-      height: 20,
-      width: 20,
-    },
-  },
-  versionButtonDiv: {
-    position: 'absolute',
-    bottom: 0,
-  },
-  appBarPanels: {},
-}));
+import { getSxClasses } from './app-bar-style';
 
 type AppbarProps = {
   activeTrap: boolean;
@@ -96,12 +27,12 @@ type AppbarProps = {
  * Create an app-bar with buttons that can open a panel
  */
 export function Appbar({ activeTrap, activeTrapSet }: AppbarProps): JSX.Element {
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
   const [buttonPanelGroups, setButtonPanelGroups] = useState<Record<string, Record<string, TypeButtonPanel>>>({});
   const [ModalIsShown, setModalIsShown] = useState(false);
   const [selectedAppBarButtonId, setSelectedAppbarButtonId] = useState<string>('');
 
-  const classes = useStyles();
-
   const appBar = useRef<HTMLDivElement>(null);
 
   const mapContext = useContext(MapContext);
@@ -176,16 +107,16 @@ export function Appbar({ activeTrap, activeTrapSet }: AppbarProps): JSX.Element
   }, [addButtonPanel, mapId, removeButtonPanel, selectedAppBarButtonId]);
 
   return (
-    <div className={classes.appBar} ref={appBar}>
-      <div className={classes.appBarButtons}>
+    <Box sx={sxClasses.appBar} ref={appBar}>
+      <Box sx={sxClasses.appBarButtons}>
         {mapFeaturesConfig.appBar?.includes('geolocator') && mapFeaturesConfig?.map.interaction === 'dynamic' && (
-          <div>
-            <List className={classes.appBarList}>
+          <Box>
+            <List sx={sxClasses.appBarList}>
               <ListItem>
-                <Geolocator className={classes.appBarButton} mapId={mapId} />
+                <Geolocator sx={sxClasses.appBarButton} mapId={mapId} />
               </ListItem>
             </List>
-          </div>
+          </Box>
         )}
 
         {Object.keys(buttonPanelGroups).map((groupName: string) => {
@@ -194,7 +125,7 @@ export function Appbar({ activeTrap, activeTrapSet }: AppbarProps): JSX.Element
 
           // display the button panels in the list
           return (
-            <List key={groupName} className={classes.appBarList}>
+            <List key={groupName} sx={sxClasses.appBarList}>
               {Object.keys(buttonPanels).map((buttonPanelsKey) => {
                 const buttonPanel = buttonPanels[buttonPanelsKey];
                 return buttonPanel?.button.visible !== undefined && buttonPanel?.button.visible ? (
@@ -205,7 +136,7 @@ export function Appbar({ activeTrap, activeTrapSet }: AppbarProps): JSX.Element
                         aria-label={buttonPanel.button.tooltip}
                         tooltip={buttonPanel.button.tooltip}
                         tooltipPlacement="right"
-                        className={`${classes.appBarButton} ${selectedAppBarButtonId === buttonPanel.button.id ? 'active' : ''}`}
+                        className={`${sxClasses.appBarButton} ${selectedAppBarButtonId === buttonPanel.button.id ? 'active' : ''}`}
                         size="small"
                         onClick={() => {
                           if (!buttonPanel.panel?.status) {
@@ -227,16 +158,16 @@ export function Appbar({ activeTrap, activeTrapSet }: AppbarProps): JSX.Element
           );
         })}
         {mapFeaturesConfig.appBar?.includes('export') && (
-          <div>
-            <List className={classes.appBarList}>
+          <Box>
+            <List sx={sxClasses.appBarList}>
               <ListItem>
-                <Export className={`${classes.appBarButton} ${ModalIsShown ? 'active' : ''}`} openModal={openModal} />
+                <Export className={`${sxClasses.appBarButton} ${ModalIsShown ? 'active' : ''}`} openModal={openModal} />
               </ListItem>
             </List>
-          </div>
+          </Box>
         )}
-        <div className={classes.versionButtonDiv}>
-          <List className={classes.appBarList}>
+        <Box sx={sxClasses.versionButtonDiv}>
+          <List sx={sxClasses.appBarList}>
             <hr />
             <ListItem>
               <Notifications />
@@ -245,8 +176,8 @@ export function Appbar({ activeTrap, activeTrapSet }: AppbarProps): JSX.Element
               <Version />
             </ListItem>
           </List>
-        </div>
-      </div>
+        </Box>
+      </Box>
       {Object.keys(buttonPanelGroups).map((groupName: string) => {
         // get button panels from group
         const buttonPanels = buttonPanelGroups[groupName];
@@ -269,6 +200,6 @@ export function Appbar({ activeTrap, activeTrapSet }: AppbarProps): JSX.Element
         );
       })}
       <ExportModal isShown={ModalIsShown} closeModal={closeModal} />
-    </div>
+    </Box>
   );
 }
diff --git a/packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx b/packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx
index c867a9a2416..bae03ca7ccf 100644
--- a/packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx
+++ b/packages/geoview-core/src/core/components/app-bar/buttons/geolocator.tsx
@@ -7,14 +7,14 @@ import { getGeoViewStore } from '@/core/stores/stores-managers';
  */
 interface GeolocatorProps {
   mapId: string;
-  className?: string | undefined;
+  sx?: React.CSSProperties;
 }
 
 /**
  * default properties values
  */
 const defaultProps = {
-  className: '',
+  sx: {},
 };
 
 /**
@@ -23,7 +23,7 @@ const defaultProps = {
  * @returns {JSX.Element} the geolocator button
  */
 export default function Geolocator(props: GeolocatorProps): JSX.Element {
-  const { mapId, className } = props;
+  const { mapId, sx = {} } = props;
   const [active, setActive] = useState(true);
   const store = getGeoViewStore(mapId);
 
@@ -40,7 +40,8 @@ export default function Geolocator(props: GeolocatorProps): JSX.Element {
       tooltip="appbar.geolocator"
       tooltipPlacement="bottom-end"
       onClick={click}
-      className={`${className} ${active ? 'active' : ''}`}
+      sx={sx}
+      className={`${active ? 'active' : ''}`}
     >
       <SearchIcon />
     </IconButton>
diff --git a/packages/geoview-core/src/core/components/details/details.tsx b/packages/geoview-core/src/core/components/details/details.tsx
index 6fde782aa20..10704638b27 100644
--- a/packages/geoview-core/src/core/components/details/details.tsx
+++ b/packages/geoview-core/src/core/components/details/details.tsx
@@ -1,6 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
+import { useStore } from 'zustand';
 import { TypeArrayOfFeatureInfoEntries } from '@/api/events/payloads';
 import { LayersListFooter } from './layers-list-footer';
+import { getGeoViewStore } from '@/core/stores/stores-managers';
 
 export interface TypeDetailsProps {
   arrayOfLayerData: TypeArrayOfLayerData;
@@ -20,11 +22,15 @@ export type TypeArrayOfLayerData = TypeLayerData[];
  * @returns {JSX.Element} returns the Details component
  */
 export function DetailsFooter({ arrayOfLayerData, mapId }: TypeDetailsProps): JSX.Element | null {
-  const [details, setDetails] = useState<TypeArrayOfLayerData>([]);
+  const store = getGeoViewStore(mapId);
+  const layerDataArray = useStore(store, (state) => state.detailsState.layerDataArray);
 
   useEffect(() => {
-    setDetails(arrayOfLayerData);
+    store.setState({
+      detailsState: { ...store.getState().detailsState, layerDataArray: arrayOfLayerData },
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [arrayOfLayerData]);
 
-  return <LayersListFooter arrayOfLayerData={details} mapId={mapId} />;
+  return <LayersListFooter arrayOfLayerData={layerDataArray} mapId={mapId} />;
 }
diff --git a/packages/geoview-core/src/core/components/details/layers-list-footer.tsx b/packages/geoview-core/src/core/components/details/layers-list-footer.tsx
index ff36324087a..7f38fabd98a 100644
--- a/packages/geoview-core/src/core/components/details/layers-list-footer.tsx
+++ b/packages/geoview-core/src/core/components/details/layers-list-footer.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react/require-default-props */
 import React, { useEffect, useState, useRef, useCallback } from 'react';
+import { useStore } from 'zustand';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { getUid } from 'ol/util';
@@ -35,6 +36,7 @@ import {
   TypeGeometry,
 } from '@/api/events/payloads';
 import { getSxClasses } from './details-style';
+import { getGeoViewStore } from '@/core/stores/stores-managers';
 
 interface TypeLayersListProps {
   arrayOfLayerData: TypeArrayOfLayerData;
@@ -52,6 +54,10 @@ export function LayersListFooter(props: TypeLayersListProps): JSX.Element {
   const { t } = useTranslation<string>();
   const theme = useTheme();
   const selectedFeatures = useRef<string[]>([]);
+
+  const store = getGeoViewStore(mapId);
+  const selectedLayerPath = useStore(store, (state) => state.detailsState.selectedLayerPath);
+
   const [layerDataInfo, setLayerDataInfo] = useState<TypeLayerData | null>(null);
   const [currentFeatureIndex, setCurrentFeatureIndex] = useState<number>(0);
   const [isClearAllCheckboxes, setIsClearAllCheckboxes] = useState<boolean>(false);
@@ -59,6 +65,11 @@ export function LayersListFooter(props: TypeLayersListProps): JSX.Element {
 
   const sxClasses = getSxClasses(theme);
 
+  // Returns the index of matching layer based on the found layer path
+  const findLayerPathIndex = (layerDataArray: TypeArrayOfLayerData, layerPathSearch: string): number => {
+    return layerDataArray.findIndex((item) => item.layerPath === layerPathSearch);
+  };
+
   const highlightCallbackFunction = (payload: PayloadBaseClass) => {
     if (payloadIsAFeatureHighlight(payload)) {
       selectedFeatures.current.push(getUid(payload.feature.geometry));
@@ -133,11 +144,20 @@ export function LayersListFooter(props: TypeLayersListProps): JSX.Element {
 
   useEffect(() => {
     if (arrayOfLayerData.length > 0) {
-      // load the first layer we clicked with its feature info in right panel
-      // if there are multiple layers, we load the first one on the list with its feature info
-      setLayerDataInfo(arrayOfLayerData[0]);
+      // Check if have the previous selected layer path in incoming arrayOfLayerData
+      // if so, get the index of the found layer, we need to pass to setLayerDataInfo to load layer in left panel
+      const commonLayerPathIndex = findLayerPathIndex(arrayOfLayerData, selectedLayerPath);
+      setLayerDataInfo(arrayOfLayerData[commonLayerPathIndex > -1 ? commonLayerPathIndex : 0]);
+      store.setState({
+        detailsState: {
+          ...store.getState().detailsState,
+          selectedLayerPath: arrayOfLayerData[commonLayerPathIndex > -1 ? commonLayerPathIndex : 0].layerPath,
+        },
+      });
+
       setCurrentFeatureIndex(0);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [arrayOfLayerData]);
 
   const renderLayerList = useCallback(() => {
@@ -164,6 +184,9 @@ export function LayersListFooter(props: TypeLayersListProps): JSX.Element {
                   onClick={() => {
                     setLayerDataInfo(layerData);
                     setCurrentFeatureIndex(0);
+                    store.setState({
+                      detailsState: { ...store.getState().detailsState, selectedLayerPath: layerData.layerPath },
+                    });
                   }}
                   sx={{ height: '67px' }}
                 >
@@ -232,7 +255,7 @@ export function LayersListFooter(props: TypeLayersListProps): JSX.Element {
                         aria-label="backward"
                         tooltip="details.previousFeatureBtn"
                         tooltipPlacement="top"
-                        onClick={() => setCurrentFeatureIndex((prevValue) => prevValue - 1)}
+                        onClick={() => setCurrentFeatureIndex(currentFeatureIndex - 1)}
                         disabled={currentFeatureIndex === 0}
                       >
                         <ArrowBackIosOutlinedIcon />
@@ -242,7 +265,7 @@ export function LayersListFooter(props: TypeLayersListProps): JSX.Element {
                         aria-label="forward"
                         tooltip="details.nextFeatureBtn"
                         tooltipPlacement="top"
-                        onClick={() => setCurrentFeatureIndex((prevValue) => prevValue + 1)}
+                        onClick={() => setCurrentFeatureIndex(currentFeatureIndex + 1)}
                         // eslint-disable-next-line no-unsafe-optional-chaining
                         disabled={currentFeatureIndex === layerDataInfo?.features.length - 1}
                       >
diff --git a/packages/geoview-core/src/core/components/footer-bar/footer-bar-style.ts b/packages/geoview-core/src/core/components/footer-bar/footer-bar-style.ts
index 74c7c8d7761..4e45e613402 100644
--- a/packages/geoview-core/src/core/components/footer-bar/footer-bar-style.ts
+++ b/packages/geoview-core/src/core/components/footer-bar/footer-bar-style.ts
@@ -18,7 +18,6 @@ export const sxClassesFooterBar = {
   mouseScaleControlsContainer: {
     display: 'flex',
     flexDirection: 'row',
-    gap: 20,
     '& button': {
       cursor: 'pointer',
       margin: 'auto',
diff --git a/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx b/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx
index 534ba4e2646..a0ed6e43f44 100644
--- a/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx
+++ b/packages/geoview-core/src/core/components/footer-bar/footer-bar.tsx
@@ -28,14 +28,14 @@ export function Footerbar(): JSX.Element {
 
   const footerBarRef = useRef<HTMLDivElement>();
 
-  const defaultTheme = useTheme();
+  const theme = useTheme();
 
   // get value from the store
   // if map is static do not display mouse position or rotation controls
   const interaction = useStore(getGeoViewStore(mapId), (state) => state.mapState.interaction);
 
   // if screen size is medium and up
-  const deviceSizeMedUp = useMediaQuery(defaultTheme.breakpoints.up('sm'));
+  const deviceSizeMedUp = useMediaQuery(theme.breakpoints.up('sm'));
 
   return (
     <Box id={`${mapId}-footerBar`} sx={sxClassesFooterBar.footerBarContainer} ref={footerBarRef as MutableRefObject<HTMLDivElement>}>
diff --git a/packages/geoview-core/src/core/components/footer-tabs/footer-tabs-style.ts b/packages/geoview-core/src/core/components/footer-tabs/footer-tabs-style.ts
new file mode 100644
index 00000000000..51511461681
--- /dev/null
+++ b/packages/geoview-core/src/core/components/footer-tabs/footer-tabs-style.ts
@@ -0,0 +1,11 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  tabsContainer: {
+    position: 'relative',
+    backgroundColor: theme.palette.background.default,
+    width: '100%',
+    transition: 'height 0.2s ease-out',
+    height: '55px',
+  },
+});
diff --git a/packages/geoview-core/src/core/components/footer-tabs/footer-tabs.tsx b/packages/geoview-core/src/core/components/footer-tabs/footer-tabs.tsx
index b73661142df..b6450defe20 100644
--- a/packages/geoview-core/src/core/components/footer-tabs/footer-tabs.tsx
+++ b/packages/geoview-core/src/core/components/footer-tabs/footer-tabs.tsx
@@ -1,5 +1,5 @@
 import { MutableRefObject, useCallback, useContext, useEffect, useRef, useState } from 'react';
-import makeStyles from '@mui/styles/makeStyles';
+import { Box, useTheme } from '@mui/material';
 
 import { MapContext } from '@/core/app-start';
 import { api } from '@/app';
@@ -8,16 +8,7 @@ import { EVENT_NAMES } from '@/api/events/event-types';
 import { FooterTabPayload, PayloadBaseClass, payloadIsAFooterTab } from '@/api/events/payloads';
 
 import { ExpandLessIcon, ExpandMoreIcon, FullscreenIcon, FullscreenExitIcon, IconButton, Tabs, TypeTabs } from '@/ui';
-
-export const useStyles = makeStyles((theme) => ({
-  tabsContainer: {
-    position: 'relative',
-    backgroundColor: theme.palette.background.default,
-    width: '100%',
-    transition: 'height 0.2s ease-out',
-    height: '55px',
-  },
-}));
+import { getSxClasses } from './footer-tabs-style';
 
 /**
  * The FooterTabs component is used to display a list of tabs and their content.
@@ -30,8 +21,8 @@ export function FooterTabs(): JSX.Element | null {
   const [isCollapsed, setIsCollapsed] = useState(true);
 
   const [isFullscreen, setIsFullscreen] = useState(false);
-
-  const classes = useStyles();
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
 
   const mapConfig = useContext(MapContext);
 
@@ -170,7 +161,7 @@ export function FooterTabs(): JSX.Element | null {
   }, [addTab, mapId, removeTab]);
 
   return api.maps[mapId].footerTabs.tabs.length > 0 ? (
-    <div ref={tabsContainerRef as MutableRefObject<HTMLDivElement>} className={`${classes.tabsContainer} tabsContainer`}>
+    <Box ref={tabsContainerRef as MutableRefObject<HTMLDivElement>} sx={sxClasses.tabsContainer} className="tabsContainer">
       <Tabs
         isCollapsed={isCollapsed}
         handleCollapse={handleCollapse}
@@ -193,6 +184,6 @@ export function FooterTabs(): JSX.Element | null {
           </>
         }
       />
-    </div>
+    </Box>
   ) : null;
 }
diff --git a/packages/geoview-core/src/core/components/layers/hooks/helpers.ts b/packages/geoview-core/src/core/components/layers/hooks/helpers.ts
new file mode 100644
index 00000000000..fa68a150c7c
--- /dev/null
+++ b/packages/geoview-core/src/core/components/layers/hooks/helpers.ts
@@ -0,0 +1,109 @@
+import _ from 'lodash';
+import { isVectorLegend, isWmsLegend, isImageStaticLegend, TypeLayerStyles } from '@/geo/layer/geoview-layers/abstract-geoview-layers';
+import { api } from '@/app';
+import { TypeLocalizedString } from '@/geo/map/map-schema-types';
+import { TypeLegendLayer, TypeLegendLayerIcon, TypeLegendLayerItem } from '../types';
+import { getGeoViewStore } from '@/core/stores/stores-managers';
+
+export function useLegendHelpers(mapId: string) {
+  const store = getGeoViewStore(mapId);
+
+  function populateLegendStoreWithFakeData() {
+    const legendInfo = api.maps[mapId].legend.legendLayerSet.resultSets;
+    // console.log('I got here ', legendInfo, _.keys(legendInfo));
+    const keys = _.keys(legendInfo);
+    const legendLayers: TypeLegendLayer[] = [
+      {
+        layerPath: 'geojsonLYR5',
+        layerName: { en: 'Layer with groups', fr: 'Layer with groups' },
+        type: 'GeoJSON',
+        layerStatus: 'loaded',
+        layerPhase: 'processed',
+        querySent: true,
+        children: [],
+        items: [],
+      },
+    ];
+
+    keys.forEach((i) => {
+      const setData = legendInfo[i];
+      const items: TypeLegendLayerItem[] = [];
+      const legendData = setData.data?.legend ? (setData.data.legend as TypeLayerStyles) : undefined;
+      const itemCanvases = legendData ? legendData.Point?.arrayOfCanvas : undefined;
+      if (itemCanvases) {
+        itemCanvases.forEach((r, ind) => {
+          if (r) {
+            items.push({ name: `Item name ${ind}`, isChecked: true, icon: r.toDataURL() });
+          }
+        });
+      }
+
+      const item: TypeLegendLayer = {
+        layerPath: setData.data?.layerPath ?? '',
+        layerName: setData.data?.layerName as TypeLocalizedString,
+        type: setData.data?.type ?? 'imageStatic',
+        layerStatus: setData.layerStatus,
+        layerPhase: setData.layerPhase,
+        querySent: setData.querySent,
+        children: [],
+        items,
+      };
+
+      if (i.startsWith('geojsonLYR5')) {
+        legendLayers[0].children.push(item);
+      } else {
+        legendLayers.push(item);
+      }
+    });
+
+    // adding to store
+    store.setState({
+      legendState: { ...store.getState().legendState, legendLayers },
+    });
+  }
+
+  function getLayerIconImage(path: string): TypeLegendLayerIcon | undefined {
+    const layerLegend = api.maps[mapId].legend.legendLayerSet.resultSets?.[path]?.data;
+    let iconDetails: TypeLegendLayerIcon = {};
+    if (layerLegend) {
+      if (layerLegend.legend === null) iconDetails.iconImg = 'no data';
+      if (isWmsLegend(layerLegend) || isImageStaticLegend(layerLegend)) {
+        iconDetails.iconType = 'simple';
+        if (layerLegend.legend) {
+          iconDetails.iconImg = layerLegend.legend?.toDataURL();
+        }
+      } else if (isVectorLegend(layerLegend) && layerLegend.legend) {
+        Object.entries(layerLegend.legend).forEach(([, styleRepresentation]) => {
+          if (styleRepresentation.arrayOfCanvas) {
+            iconDetails.iconType = 'list';
+            const iconImageList = (styleRepresentation.arrayOfCanvas as HTMLCanvasElement[]).map((canvas) => {
+              return canvas.toDataURL();
+            });
+            if (iconImageList.length > 0) iconDetails = { ...iconDetails, iconImg: iconImageList[0] };
+            if (iconImageList.length > 1) iconDetails = { ...iconDetails, iconImgStacked: iconImageList[1] };
+            if (styleRepresentation.defaultCanvas) {
+              iconImageList.push(styleRepresentation.defaultCanvas.toDataURL());
+            }
+            if (styleRepresentation.clusterCanvas) {
+              iconImageList.push(styleRepresentation.clusterCanvas.toDataURL());
+            }
+            iconDetails.iconList = iconImageList;
+          } else {
+            iconDetails.iconType = 'simple';
+            iconDetails.iconImg = (styleRepresentation.defaultCanvas as HTMLCanvasElement).toDataURL();
+          }
+        });
+      } else {
+        // eslint-disable-next-line no-console
+        console.log(`${path} - UNHANDLED LEGEND TYPE`);
+      }
+      return iconDetails;
+    }
+    return undefined;
+  }
+
+  return {
+    populateLegendStoreWithFakeData,
+    getLayerIconImage,
+  };
+}
diff --git a/packages/geoview-core/src/core/components/layers/layers-api.ts b/packages/geoview-core/src/core/components/layers/layers-api.ts
new file mode 100644
index 00000000000..154cd9ea02b
--- /dev/null
+++ b/packages/geoview-core/src/core/components/layers/layers-api.ts
@@ -0,0 +1,65 @@
+import { createElement } from 'react';
+import { LegendsLayerSet, api } from '@/app';
+import { SingleLayer } from './left-panel/single-layer';
+import { TypeLegendItemProps, TypeLegendProps } from './types';
+import { Layers } from './layers';
+
+/**
+ * API to manage legend component
+ *
+ * @exports
+ * @class
+ */
+export class LayersApi {
+  mapId!: string;
+
+  legendLayerSet: LegendsLayerSet;
+
+  /**
+   * initialize the legend api
+   *
+   * @param mapId the id of the map this legend belongs to
+   */
+  constructor(mapId: string) {
+    this.mapId = mapId;
+    this.legendLayerSet = api.getLegendsLayerSet(mapId);
+  }
+
+  /**
+   * Create a legend as an element
+   *
+   */
+  createLayers = (props: TypeLegendProps) => {
+    // const { layerIds, isRemoveable, canSetOpacity, expandAll, hideAll } = props;
+    // const legendItems = layerIds.map((layerId) => {
+    //   const geoviewLayerInstance = api.maps[this.mapId].layer.geoviewLayers[layerId];
+    //   if (geoviewLayerInstance) {
+    //     return createElement(LegendItem, {
+    //       key: `layerKey-${layerId}`,
+    //       layerId,
+    //       geoviewLayerInstance,
+    //       isRemoveable,
+    //       canSetOpacity,
+    //       expandAll,
+    //       hideAll,
+    //       canZoomTo: true,
+    //     });
+    //   }
+    //   return null;
+    return createElement(Layers, {
+      ...props,
+      mapId: this.mapId,
+    });
+    // return createElement('div', {}, createElement(List, { sx: { width: '100%' } }, legendItems));
+  };
+
+  /**
+   * Create an individual legend item
+   *
+   */
+  createSingleLayer = (props: TypeLegendItemProps) => {
+    const { layerId } = props;
+    const geoviewLayerInstance = api.maps[this.mapId].layer.geoviewLayers[layerId];
+    return createElement(SingleLayer, { layerId, geoviewLayerInstance, key: layerId });
+  };
+}
diff --git a/packages/geoview-core/src/core/components/layers/layers-style.ts b/packages/geoview-core/src/core/components/layers/layers-style.ts
new file mode 100644
index 00000000000..f239d57924c
--- /dev/null
+++ b/packages/geoview-core/src/core/components/layers/layers-style.ts
@@ -0,0 +1,88 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  list: {
+    color: 'text.primary',
+    marginLeft: '1rem',
+    width: '100%',
+    paddingRight: '2rem',
+
+    '& .MuiListItemText-primary': {
+      font: theme.footerPanel.layerTitleFont,
+    },
+
+    '& .MuiListItem-root': {
+      height: '100%',
+      '& .MuiListItemButton-root': {
+        padding: '0 0 0 16px',
+        height: '100%',
+      },
+      '& .MuiBox-root': {
+        height: '100%',
+        borderTopRightRadius: '4px',
+        borderBottomRightRadius: '4px',
+        position: 'relative',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      },
+    },
+
+    '& .MuiListItemIcon-root': {
+      minWidth: '2.5rem',
+      marginRight: '20px',
+    },
+    '& .MuiListItemText-root': {
+      '>span': {
+        fontSize: '1rem',
+      },
+      '> p': {
+        fontSize: '0.875rem',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      },
+    },
+  },
+  legendContainer: {
+    background: theme.footerPanel.contentBg,
+    boxShadow: theme.footerPanel.contentShadow,
+    padding: '20px',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  legendTitle: {
+    textAlign: 'left',
+    fontFamily: 'Open Sans, Semibold',
+    fontSize: '18px',
+  },
+  categoryTitleContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: '15px',
+  },
+  categoryTitle: {
+    textAlign: 'left',
+    font: theme.footerPanel.titleFont,
+    fontSize: '20px',
+  },
+  legendButton: {
+    font: 'normal normal medium 16px/611px Noto Sans Myanmar',
+    color: '#515BA5',
+    backgroundColor: '#F4F5FF',
+    fontWeight: 'bold',
+    fontSize: '16px',
+  },
+  legendButtonText: {
+    font: 'normal normal medium 16px/611px Noto Sans Myanmar',
+    textTransform: 'capitalize',
+    fontWeight: 'bold',
+    color: '#515BA5',
+    fontSize: '16px',
+  },
+  legendItemContainer: {
+    border: '2px solid red',
+    width: '100%',
+  },
+});
diff --git a/packages/geoview-core/src/core/components/layers/layers.tsx b/packages/geoview-core/src/core/components/layers/layers.tsx
new file mode 100644
index 00000000000..19aec8ee84e
--- /dev/null
+++ b/packages/geoview-core/src/core/components/layers/layers.tsx
@@ -0,0 +1,147 @@
+import { Button, styled, useTheme } from '@mui/material';
+import React, { useEffect } from 'react';
+import { useStore } from 'zustand';
+import { useTranslation } from 'react-i18next';
+import { api } from '@/app';
+import { LegendItemsDetailsProps, TypeLegendItemProps } from './types';
+import { AddIcon, Box, Grid, List, Typography, Stack, ExpandIcon } from '@/ui';
+import { LayerDetails } from './right-panel/layer-details';
+import { getGeoViewStore } from '@/core/stores/stores-managers';
+import { SingleLayer } from './left-panel/single-layer';
+import { getSxClasses } from './layers-style';
+import { useLegendHelpers } from './hooks/helpers';
+
+const Item = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.mode === 'dark' ? '#262B32' : '#fff',
+  padding: theme.spacing(1),
+  textAlign: 'center',
+  borderRadius: 4,
+}));
+
+export function Layers(props: LegendItemsDetailsProps): JSX.Element {
+  const { layerIds, isRemoveable, canSetOpacity, expandAll, hideAll, mapId } = props;
+
+  const { t } = useTranslation<string>();
+
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
+
+  // Populating fake legend data
+  const helpers = useLegendHelpers(mapId);
+  helpers.populateLegendStoreWithFakeData();
+
+  const store = getGeoViewStore(mapId);
+  // controls what is displayed on the right panel
+  const selectedLegendItem = useStore(store, (state) => state.legendState.selectedItem);
+
+  const legendLayers: TypeLegendItemProps[] = layerIds
+    .filter((layerId) => api.maps[mapId].layer.geoviewLayers[layerId])
+    .map((layerId) => {
+      const geoviewLayerInstance = api.maps[mapId].layer.geoviewLayers[layerId];
+
+      const propsForComponents: TypeLegendItemProps = {
+        layerId,
+        geoviewLayerInstance,
+        isRemoveable,
+        canSetOpacity,
+        expandAll,
+        hideAll,
+      };
+
+      return propsForComponents;
+    });
+
+  useEffect(() => {
+    if (!selectedLegendItem && legendLayers) {
+      store.setState({
+        legendState: { ...store.getState().legendState, selectedItem: legendLayers[0] },
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  function buttonsMenu() {
+    return (
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '15px' }}>
+        <div>
+          <Typography sx={sxClasses.categoryTitle}>{t('general.layers')}</Typography>
+        </div>
+        <Stack style={{ alignItems: 'center', gap: '15px' }} direction="row">
+          <Button
+            variant="contained"
+            size="small"
+            sx={{ backgroundColor: '#F4F5FF' }}
+            startIcon={<ExpandIcon fontSize="small" sx={{ color: '#515BA5' }} />}
+          >
+            <Typography sx={sxClasses.legendButtonText}>{t('legend.re-arrange')}</Typography>
+          </Button>
+          <Button
+            variant="contained"
+            size="small"
+            sx={{ backgroundColor: '#F4F5FF' }}
+            startIcon={<AddIcon fontSize="small" sx={{ color: '#515BA5' }} />}
+          >
+            <Typography sx={sxClasses.legendButtonText}>{t('legend.add_layer')}</Typography>
+          </Button>
+        </Stack>
+      </Box>
+    );
+  }
+
+  const leftPanel = () => {
+    const legendItems = legendLayers.map((details) => {
+      return (
+        <SingleLayer
+          key={`layerKey-${details.layerId}`}
+          layerId={details.layerId}
+          geoviewLayerInstance={details.geoviewLayerInstance}
+          isRemoveable={details.isRemoveable}
+          canSetOpacity={details.canSetOpacity}
+          expandAll={details.expandAll}
+          hideAll={details.hideAll}
+        />
+      );
+    });
+
+    return (
+      <div>
+        {buttonsMenu()}
+        <List sx={sxClasses.list}>{legendItems}</List>
+      </div>
+    );
+  };
+
+  const rightPanel = () => {
+    if (selectedLegendItem) {
+      return (
+        <Item>
+          <LayerDetails
+            key={`layerKey-${selectedLegendItem.layerId}`}
+            layerId={selectedLegendItem.layerId}
+            geoviewLayerInstance={selectedLegendItem?.geoviewLayerInstance}
+            isRemoveable={selectedLegendItem.isRemoveable}
+            canSetOpacity={selectedLegendItem.canSetOpacity}
+            expandAll={selectedLegendItem.expandAll}
+            hideAll={selectedLegendItem?.hideAll}
+            isParentVisible={selectedLegendItem.geoviewLayerInstance.getVisible(selectedLegendItem.layerConfigEntry!)}
+          />
+        </Item>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <Box sx={sxClasses.legendContainer}>
+      <Grid container direction={{ xs: 'column', sm: 'row' }} spacing={12}>
+        <Grid item xs={12} sm={6}>
+          {leftPanel()}
+        </Grid>
+        <Grid item xs={12} sm={6}>
+          {rightPanel()}
+        </Grid>
+      </Grid>
+    </Box>
+  );
+}
diff --git a/packages/geoview-core/src/core/components/legend-2/legend-item.tsx b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx
similarity index 84%
rename from packages/geoview-core/src/core/components/legend-2/legend-item.tsx
rename to packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx
index 3767f22dfd6..325fb16cfa6 100644
--- a/packages/geoview-core/src/core/components/legend-2/legend-item.tsx
+++ b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx
@@ -32,9 +32,9 @@ import {
   TypeWmsLegendStyle,
 } from '@/geo/layer/geoview-layers/abstract-geoview-layers';
 import { TypeListOfLayerEntryConfig, TypeDisplayLanguage, layerEntryIsGroupLayer } from '@/geo/map/map-schema-types';
-import { disableScrolling } from '../../utils/utilities';
-import { WMSStyleItem } from './WMS-style-item';
-import { TypeLegendItemProps } from './types';
+import { disableScrolling } from '../../../utils/utilities';
+import { WMSStyleItem } from '../right-panel/WMS-style-item';
+import { TypeLegendItemProps } from '../types';
 import { getGeoViewStore } from '@/core/stores/stores-managers';
 
 const sxClasses = {
@@ -137,7 +137,7 @@ const sxClasses = {
  *
  * @returns {JSX.Element} the legend list item
  */
-export function LegendItem(props: TypeLegendItemProps): JSX.Element {
+export function SingleLayer(props: TypeLegendItemProps): JSX.Element {
   const {
     layerId,
     geoviewLayerInstance,
@@ -313,7 +313,7 @@ export function LegendItem(props: TypeLegendItemProps): JSX.Element {
   const handleLegendClick = () => {
     setLegendOpen(!isLegendOpen);
     store.setState({
-      legendState: { ...store.getState().legendState, selectedItem: props, selectedIsVisible: isChecked },
+      legendState: { ...store.getState().legendState, selectedItem: props },
     });
     const legendDetails = document.querySelector('#legend-details-container');
     if (legendDetails) {
@@ -390,61 +390,67 @@ export function LegendItem(props: TypeLegendItemProps): JSX.Element {
     );
   }
 
+  function renderLayerIcon() {
+    return (
+      <ListItemIcon>
+        {(groupItems.length > 0 || WMSStyles.length > 1) && (
+          <IconButton color="primary">
+            <GroupWorkOutlinedIcon />
+          </IconButton>
+        )}
+        {groupItems.length === 0 && isLegendOpen && (
+          <IconButton sx={sxClasses.iconPreview} color="primary" size="small" iconRef={closeIconRef}>
+            {iconList || iconImg !== null ? <CloseIcon /> : <MoreHorizIcon />}
+          </IconButton>
+        )}
+        {iconType === 'simple' && iconImg !== null && !isLegendOpen && WMSStyles.length < 2 && (
+          <IconButton sx={sxClasses.iconPreview} color="primary" size="small" iconRef={maxIconRef}>
+            {iconImg === 'no data' ? (
+              <BrowserNotSupportedIcon />
+            ) : (
+              <Box sx={sxClasses.legendIcon}>
+                <img alt="icon" src={iconImg} style={sxClasses.maxIconImg} />
+              </Box>
+            )}
+          </IconButton>
+        )}
+        {iconType === 'list' && !isLegendOpen && (
+          <Tooltip title={t('legend.expand_legend')!} placement="top" enterDelay={1000}>
+            <Box
+              tabIndex={0}
+              onClick={handleLegendClick}
+              sx={sxClasses.stackIconsBox}
+              ref={stackIconRef}
+              onKeyPress={(e) => handleStackIcon(e)}
+            >
+              <IconButton sx={sxClasses.iconPreviewStacked} color="primary" size="small" tabIndex={-1}>
+                <Box sx={sxClasses.legendIconTransparent}>
+                  {iconImgStacked && <img alt="icon" src={iconImgStacked} style={sxClasses.maxIconImg} />}
+                </Box>
+              </IconButton>
+              <IconButton sx={sxClasses.iconPreviewHoverable} color="primary" size="small" tabIndex={-1}>
+                <Box sx={sxClasses.legendIcon}>{iconImg && <img alt="icon" src={iconImg} style={sxClasses.maxIconImg} />}</Box>
+              </IconButton>
+            </Box>
+          </Tooltip>
+        )}
+        {groupItems.length === 0 && WMSStyles.length < 2 && !iconType && !isLegendOpen && (
+          <IconButton sx={sxClasses.iconPreview} color="primary" size="small" onClick={handleLegendClick}>
+            <TodoIcon />
+          </IconButton>
+        )}
+      </ListItemIcon>
+    );
+  }
+
   // <Grid item sm={12} md={subLayerId ? 12 : 6} lg={subLayerId ? 12 : 4}>
   return (
     <Grid item sm={12} sx={legendClass}>
       <ListItem onClick={handleLegendClick}>
         <ListItemButton>
-          <ListItemIcon>
-            {(groupItems.length > 0 || WMSStyles.length > 1) && (
-              <IconButton color="primary">
-                <GroupWorkOutlinedIcon />
-              </IconButton>
-            )}
-            {groupItems.length === 0 && isLegendOpen && (
-              <IconButton sx={sxClasses.iconPreview} color="primary" size="small" iconRef={closeIconRef}>
-                {iconList || iconImg !== null ? <CloseIcon /> : <MoreHorizIcon />}
-              </IconButton>
-            )}
-            {iconType === 'simple' && iconImg !== null && !isLegendOpen && WMSStyles.length < 2 && (
-              <IconButton sx={sxClasses.iconPreview} color="primary" size="small" iconRef={maxIconRef}>
-                {iconImg === 'no data' ? (
-                  <BrowserNotSupportedIcon />
-                ) : (
-                  <Box sx={sxClasses.legendIcon}>
-                    <img alt="icon" src={iconImg} style={sxClasses.maxIconImg} />
-                  </Box>
-                )}
-              </IconButton>
-            )}
-            {iconType === 'list' && !isLegendOpen && (
-              <Tooltip title={t('legend.expand_legend')!} placement="top" enterDelay={1000}>
-                <Box
-                  tabIndex={0}
-                  onClick={handleLegendClick}
-                  sx={sxClasses.stackIconsBox}
-                  ref={stackIconRef}
-                  onKeyPress={(e) => handleStackIcon(e)}
-                >
-                  <IconButton sx={sxClasses.iconPreviewStacked} color="primary" size="small" tabIndex={-1}>
-                    <Box sx={sxClasses.legendIconTransparent}>
-                      {iconImgStacked && <img alt="icon" src={iconImgStacked} style={sxClasses.maxIconImg} />}
-                    </Box>
-                  </IconButton>
-                  <IconButton sx={sxClasses.iconPreviewHoverable} color="primary" size="small" tabIndex={-1}>
-                    <Box sx={sxClasses.legendIcon}>{iconImg && <img alt="icon" src={iconImg} style={sxClasses.maxIconImg} />}</Box>
-                  </IconButton>
-                </Box>
-              </Tooltip>
-            )}
-            {groupItems.length === 0 && WMSStyles.length < 2 && !iconType && !isLegendOpen && (
-              <IconButton sx={sxClasses.iconPreview} color="primary" size="small" onClick={handleLegendClick}>
-                <TodoIcon />
-              </IconButton>
-            )}
-          </ListItemIcon>
+          {renderLayerIcon()}
           <Tooltip title={layerName} placement="top" enterDelay={1000}>
-            <ListItemText primary={layerName} onClick={handleExpandGroupClick} />
+            <ListItemText primary={layerName} secondary="Secondary text will go here" onClick={handleExpandGroupClick} />
           </Tooltip>
           <ListItemIcon style={{ justifyContent: 'right' }}>
             {api.maps[mapId].layer.registeredLayers[clusterLayerPath]?.initialSettings?.visible !== 'always' && (
@@ -466,7 +472,7 @@ export function LegendItem(props: TypeLegendItemProps): JSX.Element {
           {groupItems.length > 0 && (
             <Box sx={sxClasses.subLegendItemsContainer}>
               {groupItems.map((subItem) => (
-                <LegendItem
+                <SingleLayer
                   key={subItem.layerId}
                   layerId={layerId}
                   geoviewLayerInstance={geoviewLayerInstance}
diff --git a/packages/geoview-core/src/core/components/legend-2/WMS-style-item.tsx b/packages/geoview-core/src/core/components/layers/right-panel/WMS-style-item.tsx
similarity index 100%
rename from packages/geoview-core/src/core/components/legend-2/WMS-style-item.tsx
rename to packages/geoview-core/src/core/components/layers/right-panel/WMS-style-item.tsx
diff --git a/packages/geoview-core/src/core/components/legend-2/legend-item-details/legend-item-details.tsx b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx
similarity index 97%
rename from packages/geoview-core/src/core/components/legend-2/legend-item-details/legend-item-details.tsx
rename to packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx
index 581cb9e1867..2851057df28 100644
--- a/packages/geoview-core/src/core/components/legend-2/legend-item-details/legend-item-details.tsx
+++ b/packages/geoview-core/src/core/components/layers/right-panel/layer-details.tsx
@@ -12,15 +12,15 @@ import {
   IconButton,
   SliderBase,
   CheckIcon,
-  Grid,
   List,
   Button,
   Stack,
   Typography,
   ZoomInSearchIcon,
+  Paper,
 } from '@/ui';
 import { api, EsriDynamic, payloadIsLegendInfo, NumberPayload, PayloadBaseClass } from '@/app';
-import { LegendIconList } from '../legend-icon-list';
+import { LayerIconList } from './layer-icon-list';
 import { TypeLegend, isVectorLegend, isWmsLegend, isImageStaticLegend } from '@/geo/layer/geoview-layers/abstract-geoview-layers';
 import {
   TypeClassBreakStyleConfig,
@@ -100,7 +100,6 @@ const sxClasses = {
     },
   },
   iconPreviewStacked: {
-    // marginLeft: 8,
     padding: 0,
     borderRadius: 0,
     border: '1px solid',
@@ -116,6 +115,9 @@ const sxClasses = {
     padding: '8px 20px 7px 15px',
     backgroundColor: '#F6F6F6',
   },
+  legendItemContainer: {
+    border: '2px solid #515BA5',
+  },
   menuListIcon: { justifyContent: 'right', 'min-width': '56px' },
 };
 
@@ -124,7 +126,8 @@ const sxClasses = {
  *
  * @returns {JSX.Element} the legend list item
  */
-export function LegendItemDetails(props: TypeLegendItemDetailsProps): JSX.Element {
+
+export function LayerDetails(props: TypeLegendItemDetailsProps): JSX.Element {
   const { layerId, geoviewLayerInstance, subLayerId, layerConfigEntry, isRemoveable } = props;
 
   const { t, i18n } = useTranslation<string>();
@@ -140,7 +143,6 @@ export function LegendItemDetails(props: TypeLegendItemDetailsProps): JSX.Elemen
   const canCluster = !!api.maps[mapId].layer.registeredLayers[unclusterLayerPath];
 
   const [isClusterToggleEnabled, setIsClusterToggleEnabled] = useState(false);
-
   const [isLegendOpen, setLegendOpen] = useState(true);
   const [groupItems, setGroupItems] = useState<TypeListOfLayerEntryConfig>([]);
   const [iconType, setIconType] = useState<string | null>(null);
@@ -173,6 +175,9 @@ export function LegendItemDetails(props: TypeLegendItemDetailsProps): JSX.Elemen
       setGroupItems(geoviewLayerInstance?.listOfLayerEntryConfig);
       isGroup = true;
     }
+    // console.log('is GROUP', isGroup);
+    // console.log('checkIs GROUP', checkIsGroup);
+
     return isGroup;
   };
 
@@ -378,7 +383,7 @@ export function LegendItemDetails(props: TypeLegendItemDetailsProps): JSX.Elemen
   }, []);
 
   return (
-    <Grid item sm={12}>
+    <Paper sx={sxClasses.legendItemContainer}>
       <Stack sx={{ justifyContent: 'space-between', padding: '16px 17px 16px 23px' }} direction="row">
         <div>
           <Typography> {layerName} </Typography>
@@ -422,7 +427,7 @@ export function LegendItemDetails(props: TypeLegendItemDetailsProps): JSX.Elemen
       <Box sx={sxClasses.expandableIconContainer}>
         {iconType === 'simple' && iconImg !== null && <img alt="" style={theme.iconImg} src={iconImg} />}
         {iconType === 'list' && iconList !== null && labelList !== null && (
-          <LegendIconList
+          <LayerIconList
             iconImages={iconList}
             iconLabels={labelList}
             mapId={mapId}
@@ -434,6 +439,6 @@ export function LegendItemDetails(props: TypeLegendItemDetailsProps): JSX.Elemen
           />
         )}
       </Box>
-    </Grid>
+    </Paper>
   );
 }
diff --git a/packages/geoview-core/src/core/components/legend-2/legend-icon-list.tsx b/packages/geoview-core/src/core/components/layers/right-panel/layer-icon-list.tsx
similarity index 86%
rename from packages/geoview-core/src/core/components/legend-2/legend-icon-list.tsx
rename to packages/geoview-core/src/core/components/layers/right-panel/layer-icon-list.tsx
index 887bbd0a0aa..39058d10f32 100644
--- a/packages/geoview-core/src/core/components/legend-2/legend-icon-list.tsx
+++ b/packages/geoview-core/src/core/components/layers/right-panel/layer-icon-list.tsx
@@ -2,15 +2,15 @@
 import React, { useRef, useState } from 'react';
 import { useTheme, Theme } from '@mui/material/styles';
 import { Checkbox, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
-// import { IconButton, CheckBoxOutIcon, CheckBoxIcon } from '@/ui';
 import { useStore } from 'zustand';
+import { IconButton, CheckBoxOutIcon, CheckBoxIcon } from '@/ui';
 import {
   TypeVectorLayerEntryConfig,
   TypeStyleGeometry,
   TypeLayerEntryConfig,
   TypeUniqueValueStyleConfig,
   TypeClassBreakStyleConfig,
-} from '../../types/cgpv-types';
+} from '@/geo/map/map-schema-types';
 import { getGeoViewStore } from '@/core/stores/stores-managers';
 
 const sxClasses = {
@@ -61,41 +61,22 @@ export interface TypeLegendIconListProps {
   toggleMapVisible: (layerConfig: TypeLayerEntryConfig) => void;
 }
 
-export function LegendIconList(props: TypeLegendIconListProps): JSX.Element {
+export function LayerIconList(props: TypeLegendIconListProps): JSX.Element {
   const { iconImages, iconLabels, toggleMapVisible, geometryKey, layerConfig, mapId } = props;
   const theme: Theme & {
     iconImg: React.CSSProperties;
   } = useTheme();
 
   const allChecked = iconImages.map(() => true);
-  const [isChecked, setChecked] = useState<boolean[]>(allChecked);
-  const [isAllChecked, setIsAllChecked] = useState(true);
+  const allUnChecked = iconImages.map(() => false);
 
   const isParentVisible = useStore(getGeoViewStore(mapId), (state) => state.legendState.selectedIsVisible);
   const isParentVisibleRef = useRef(isParentVisible);
   isParentVisibleRef.current = isParentVisible;
 
-  const handleToggleAll = () => {
-    if (layerConfig && geometryKey) {
-      const geometryStyle = layerConfig.style![geometryKey];
-      if (geometryStyle !== undefined) {
-        if (geometryStyle.styleType === 'uniqueValue') {
-          for (let i = 0; i < (geometryStyle as TypeUniqueValueStyleConfig).uniqueValueStyleInfo.length; i++) {
-            if ((geometryStyle as TypeUniqueValueStyleConfig).uniqueValueStyleInfo[i].visible !== 'always')
-              (geometryStyle as TypeUniqueValueStyleConfig).uniqueValueStyleInfo[i].visible = isAllChecked ? 'no' : 'yes';
-          }
-        } else if (geometryStyle.styleType === 'classBreaks') {
-          for (let i = 0; i < (geometryStyle as TypeClassBreakStyleConfig).classBreakStyleInfo.length; i++) {
-            if ((geometryStyle as TypeClassBreakStyleConfig).classBreakStyleInfo[i].visible !== 'always')
-              (geometryStyle as TypeClassBreakStyleConfig).classBreakStyleInfo[i].visible = isAllChecked ? 'no' : 'yes';
-          }
-        }
-      }
-      toggleMapVisible(layerConfig);
-    }
-    setChecked(iconImages.map(() => !isAllChecked));
-    setIsAllChecked(!isAllChecked);
-  };
+  const initialChecked = isParentVisible ? allChecked : allUnChecked;
+  const [isChecked, setChecked] = useState<boolean[]>(initialChecked);
+  const [isAllChecked, setIsAllChecked] = useState(initialChecked.every((checked) => checked));
 
   const handleToggleLayer = (index: number) => {
     if (layerConfig && geometryKey) {
@@ -120,6 +101,28 @@ export function LegendIconList(props: TypeLegendIconListProps): JSX.Element {
     setIsAllChecked(checklist.every((value) => value === true));
   };
 
+  const handleToggleAll = () => {
+    if (layerConfig && geometryKey) {
+      const geometryStyle = layerConfig.style![geometryKey];
+      if (geometryStyle !== undefined) {
+        if (geometryStyle.styleType === 'uniqueValue') {
+          for (let i = 0; i < (geometryStyle as TypeUniqueValueStyleConfig).uniqueValueStyleInfo.length; i++) {
+            if ((geometryStyle as TypeUniqueValueStyleConfig).uniqueValueStyleInfo[i].visible !== 'always')
+              (geometryStyle as TypeUniqueValueStyleConfig).uniqueValueStyleInfo[i].visible = isAllChecked ? 'no' : 'yes';
+          }
+        } else if (geometryStyle.styleType === 'classBreaks') {
+          for (let i = 0; i < (geometryStyle as TypeClassBreakStyleConfig).classBreakStyleInfo.length; i++) {
+            if ((geometryStyle as TypeClassBreakStyleConfig).classBreakStyleInfo[i].visible !== 'always')
+              (geometryStyle as TypeClassBreakStyleConfig).classBreakStyleInfo[i].visible = isAllChecked ? 'no' : 'yes';
+          }
+        }
+      }
+      toggleMapVisible(layerConfig);
+    }
+    setChecked(iconImages.map(() => !isAllChecked));
+    setIsAllChecked(!isAllChecked);
+  };
+
   return (
     <TableContainer>
       <Table sx={sxClasses.table}>
@@ -140,11 +143,13 @@ export function LegendIconList(props: TypeLegendIconListProps): JSX.Element {
                 <img alt={iconLabels[index]} src={icon} style={theme.iconImg} />
                 <span style={sxClasses.tableIconLabel}>{iconLabels[index]}</span>
               </TableCell>
-              {isParentVisibleRef.current && (
-                <TableCell>
-                  <Checkbox color="primary" checked={isChecked[index]} onChange={() => handleToggleLayer(index)} />
-                </TableCell>
-              )}
+              <TableCell>
+                {iconLabels[index] !== 'Cluster' && layerConfig?.initialSettings?.visible !== 'always' && (
+                  <IconButton color="primary" onClick={() => handleToggleLayer(index)}>
+                    {isChecked[index] === true ? <CheckBoxIcon /> : <CheckBoxOutIcon />}
+                  </IconButton>
+                )}
+              </TableCell>
             </TableRow>
           ))}
         </TableBody>
diff --git a/packages/geoview-core/src/core/components/legend-2/types.ts b/packages/geoview-core/src/core/components/layers/types.ts
similarity index 55%
rename from packages/geoview-core/src/core/components/legend-2/types.ts
rename to packages/geoview-core/src/core/components/layers/types.ts
index 754e37fe451..673d164209a 100644
--- a/packages/geoview-core/src/core/components/legend-2/types.ts
+++ b/packages/geoview-core/src/core/components/layers/types.ts
@@ -1,4 +1,5 @@
-import { AbstractGeoViewLayer, TypeLayerEntryConfig } from '@/geo';
+import { AbstractGeoViewLayer, TypeGeoviewLayerType, TypeLayerEntryConfig, TypeLocalizedString, TypeStyleConfig } from '@/geo';
+import { TypeLayerStatus } from '@/geo/map/map-schema-types';
 
 export interface TypeLegendProps {
   layerIds: string[];
@@ -46,3 +47,34 @@ export interface TypeLegendItemDetailsProps {
   expandAll?: boolean;
   hideAll?: boolean;
 }
+
+/// //////////////////////////////////////////////////
+
+export type TypeLegendLayerIcon = {
+  iconType?: string;
+  iconImg?: string;
+  iconImgStacked?: string;
+  iconList?: string[];
+};
+
+export interface TypeLegendLayerItem {
+  name: string;
+  isChecked?: boolean;
+  icon: string;
+}
+
+export interface TypeLegendLayer {
+  layerPath: string;
+  order?: number; // useful for ordering layers
+  layerName: TypeLocalizedString;
+  type: TypeGeoviewLayerType;
+  styleConfig?: TypeStyleConfig;
+  layerStatus: TypeLayerStatus;
+  layerPhase: string;
+  querySent: boolean;
+
+  icon?: TypeLegendLayerIcon;
+  // data: TypeLegend | undefined | null;
+  items: TypeLegendLayerItem[];
+  children: TypeLegendLayer[];
+}
diff --git a/packages/geoview-core/src/core/components/legend-2/legend-api.ts b/packages/geoview-core/src/core/components/legend-2/legend-api.ts
index e18e2a8f0f6..69898633daf 100644
--- a/packages/geoview-core/src/core/components/legend-2/legend-api.ts
+++ b/packages/geoview-core/src/core/components/legend-2/legend-api.ts
@@ -1,19 +1,7 @@
 import { createElement } from 'react';
 import { LegendsLayerSet, api } from '@/app';
-import { LegendItem } from './legend-item';
-import { TypeLegendItemProps, TypeLegendProps } from './types';
-import { Legend2 } from './legend';
-
-// import { List } from '@/ui';
-
-// export interface TypeLegendProps {
-//   layerIds: string[];
-//   isRemoveable?: boolean;
-//   canSetOpacity?: boolean;
-//   expandAll?: boolean;
-//   hideAll?: boolean;
-//   canZoomTo?: boolean;
-// }
+import { TypeLegendProps } from '@/core/components/layers/types';
+import { Legend } from './legend';
 
 /**
  * API to manage legend component
@@ -41,36 +29,9 @@ export class Legend2Api {
    *
    */
   createLegend = (props: TypeLegendProps) => {
-    // const { layerIds, isRemoveable, canSetOpacity, expandAll, hideAll } = props;
-    // const legendItems = layerIds.map((layerId) => {
-    //   const geoviewLayerInstance = api.maps[this.mapId].layer.geoviewLayers[layerId];
-    //   if (geoviewLayerInstance) {
-    //     return createElement(LegendItem, {
-    //       key: `layerKey-${layerId}`,
-    //       layerId,
-    //       geoviewLayerInstance,
-    //       isRemoveable,
-    //       canSetOpacity,
-    //       expandAll,
-    //       hideAll,
-    //       canZoomTo: true,
-    //     });
-    //   }
-    //   return null;
-    return createElement(Legend2, {
+    return createElement(Legend, {
       ...props,
       mapId: this.mapId,
     });
-    // return createElement('div', {}, createElement(List, { sx: { width: '100%' } }, legendItems));
-  };
-
-  /**
-   * Create an individual legend item
-   *
-   */
-  createLegendItem = (props: TypeLegendItemProps) => {
-    const { layerId } = props;
-    const geoviewLayerInstance = api.maps[this.mapId].layer.geoviewLayers[layerId];
-    return createElement(LegendItem, { layerId, geoviewLayerInstance, key: layerId });
   };
 }
diff --git a/packages/geoview-core/src/core/components/legend-2/legend-layer.tsx b/packages/geoview-core/src/core/components/legend-2/legend-layer.tsx
new file mode 100644
index 00000000000..51f0e564b03
--- /dev/null
+++ b/packages/geoview-core/src/core/components/legend-2/legend-layer.tsx
@@ -0,0 +1,110 @@
+import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
+import { useTheme } from '@mui/material';
+import { TypeDisplayLanguage } from '@/app';
+import {
+  Box,
+  ListItem,
+  Tooltip,
+  ListItemText,
+  ListItemIcon,
+  IconButton,
+  KeyboardArrowDownIcon,
+  Collapse,
+  List,
+  KeyboardArrowUpIcon,
+} from '@/ui';
+import { TypeLegendLayer } from '@/core/components/layers/types';
+import { getSxClasses } from './legend-styles';
+
+interface LegendLayerProps {
+  layer: TypeLegendLayer;
+}
+
+export function LegendLayer(props: LegendLayerProps): JSX.Element {
+  const { layer } = props;
+  const { i18n } = useTranslation<string>();
+  const layerName = layer.layerName[i18n.language as TypeDisplayLanguage];
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
+  const [isGroupOpen, setGroupOpen] = useState(true);
+
+  /**
+   * Handle expand/shrink of layer groups.
+   */
+  const handleExpandGroupClick = () => {
+    setGroupOpen(!isGroupOpen);
+  };
+
+  // renders the layers children, if any
+  function renderChildren() {
+    if (!layer.children?.length) {
+      return null;
+    }
+
+    return (
+      <List sx={{ width: '100%', padding: '20px', margin: '20px 0px' }}>
+        {layer.children.map((item) => (
+          <LegendLayer layer={item} key={item.layerPath} />
+        ))}
+      </List>
+    );
+  }
+
+  // renders the layers items if any
+  function renderItems() {
+    if (!layer.items?.length) {
+      return null;
+    }
+    return (
+      <List sx={{ width: '100%' }}>
+        {layer.items.map((item) => (
+          <ListItem key={item.name}>
+            <ListItemIcon>
+              <img alt={item.name} src={item.icon} />
+            </ListItemIcon>
+            <Tooltip title={item.name} placement="top" enterDelay={1000}>
+              <ListItemText primary={item.name} />
+            </Tooltip>
+          </ListItem>
+        ))}
+      </List>
+    );
+  }
+
+  function renderArrowButtons() {
+    if (layer.children?.length || layer.items?.length) {
+      return (
+        <ListItemIcon style={{ justifyContent: 'right' }}>
+          <IconButton color="primary">{isGroupOpen ? <KeyboardArrowDownIcon /> : <KeyboardArrowUpIcon />}</IconButton>
+        </ListItemIcon>
+      );
+    }
+    return null;
+  }
+
+  function renderCollapsible() {
+    if (!(layer.children?.length || layer.items?.length)) {
+      return null;
+    }
+
+    return (
+      <Collapse in={isGroupOpen} sx={sxClasses.collapsibleContainer} timeout="auto">
+        {renderChildren()}
+        {renderItems()}
+      </Collapse>
+    );
+  }
+
+  return (
+    <Box>
+      <ListItem key={layerName} sx={sxClasses.legendLayerListItem} divider onClick={handleExpandGroupClick}>
+        <Tooltip title={layerName} placement="top" enterDelay={1000}>
+          <ListItemText primary={layerName} />
+        </Tooltip>
+        {renderArrowButtons()}
+      </ListItem>
+      {renderCollapsible()}
+    </Box>
+  );
+}
diff --git a/packages/geoview-core/src/core/components/legend-2/legend-styles.ts b/packages/geoview-core/src/core/components/legend-2/legend-styles.ts
new file mode 100644
index 00000000000..e9dcfd37d2a
--- /dev/null
+++ b/packages/geoview-core/src/core/components/legend-2/legend-styles.ts
@@ -0,0 +1,31 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  container: {
+    background: theme.footerPanel.contentBg,
+    boxShadow: theme.footerPanel.contentShadow,
+    padding: '20px',
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  title: {
+    textAlign: 'left',
+    font: theme.footerPanel.titleFont,
+    fontSize: '20px',
+  },
+  subtitle: {
+    font: theme.footerPanel.titleFont,
+    fontWeight: 'normal',
+    fontSize: '0.9em',
+    textAlign: 'left',
+    marginBottom: '15px',
+  },
+  legendLayerListItem: {
+    padding: '6px 4px',
+  },
+  collapsibleContainer: {
+    width: '100%',
+    padding: '10px 0',
+    margin: '0px 10px',
+  },
+});
diff --git a/packages/geoview-core/src/core/components/legend-2/legend.tsx b/packages/geoview-core/src/core/components/legend-2/legend.tsx
index 09d96b2fd8f..b7c2e03f1c0 100644
--- a/packages/geoview-core/src/core/components/legend-2/legend.tsx
+++ b/packages/geoview-core/src/core/components/legend-2/legend.tsx
@@ -1,178 +1,47 @@
-import { Button, styled, useTheme } from '@mui/material';
-import React, { useState, useEffect } from 'react';
 import { useStore } from 'zustand';
+import { useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { api } from '@/app';
-import { LegendItemsDetailsProps } from './types';
-import { AddIcon, Box, Grid, List, Typography, ExpandMoreIcon, Paper, Stack, ExpandIcon } from '@/ui';
-import { LegendItemDetails } from './legend-item-details/legend-item-details';
+import { Box, List, Typography } from '@/ui';
 import { getGeoViewStore } from '@/core/stores/stores-managers';
-import { LegendItem } from './legend-item';
-import { ShowSelectedLayers } from './selected-layers/selected-layers-details';
+import { getSxClasses } from './legend-styles';
+import { LegendLayer } from './legend-layer';
 
-const Item = styled('div')(({ theme }) => ({
-  backgroundColor: theme.palette.mode === 'dark' ? '#262B32' : '#fff',
-  padding: theme.spacing(1),
-  textAlign: 'center',
-  borderRadius: 4,
-}));
-
-export function Legend2(props: LegendItemsDetailsProps): JSX.Element {
-  const { layerIds, isRemoveable, canSetOpacity, expandAll, hideAll, mapId } = props;
-
-  const { t } = useTranslation<string>();
+export interface LegendOverviewProps {
+  mapId: string;
+}
 
+export function Legend(props: LegendOverviewProps): JSX.Element {
+  const { mapId } = props;
   const theme = useTheme();
-  const sxClasses = {
-    legendContainer: {
-      background: theme.footerPanel.contentBg,
-      boxShadow: theme.footerPanel.contentShadow,
-      padding: '40px 20px 20px 20px',
-      display: 'flex',
-      flexDirection: 'column',
-    },
-    legendTitle: {
-      textAlign: 'left',
-      fontFamily: 'Open Sans, Semibold',
-      fontSize: '18px',
-    },
-    categoryTitle: {
-      textAlign: 'left',
-      fontFamily: 'Open Sans, Semibold',
-      fontSize: '20px',
-    },
-    legendButtonText: {
-      fontFamily: 'Open Sans, Semibold',
-      color: '#515BA5',
-      fontSize: '16px',
-    },
-  };
-
+  const sxClasses = getSxClasses(theme);
+  const { t } = useTranslation<string>();
   const store = getGeoViewStore(mapId);
-  const selectedLegendItem = useStore(store, (state) => state.legendState.selectedItem);
-  const [isSelectedLayersClicked, setIsSelectedLayersClicked] = useState(false);
-
-  function showSelectedLayersPanel() {
-    return (
-      <Paper
-        onClick={() => setIsSelectedLayersClicked(!isSelectedLayersClicked)}
-        sx={{
-          justifyContent: 'space-between',
-          padding: '9px 17px 10px 57px',
-          alignItems: 'center',
-          marginBottom: '27px',
-          display: 'flex',
-          flexDirection: 'row',
-          cursor: 'pointer',
-        }}
-      >
-        <div>
-          <Typography sx={sxClasses.legendTitle}>{t('legend.overview_title')}</Typography>
-          <Typography sx={{ fontSize: '0.6em' }}>{t('legend.selected_Layers')}</Typography>
-        </div>
-        <div>
-          <ExpandMoreIcon sx={{ transform: 'rotate(270deg)' }} />
-        </div>
-      </Paper>
-    );
-  }
+  const legendLayers = useStore(store, (state) => state.legendState.legendLayers);
 
-  function buttonsMenu() {
-    return (
-      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '15px' }}>
-        <div>
-          <Typography sx={sxClasses.categoryTitle}>{t('legend.categories_title')}</Typography>
-        </div>
-        <Stack style={{ alignItems: 'center', gap: '15px' }} direction="row">
-          <Button
-            variant="contained"
-            size="small"
-            sx={{ backgroundColor: '#F4F5FF' }}
-            startIcon={<ExpandIcon fontSize="small" sx={{ color: '#515BA5' }} />}
-          >
-            <Typography sx={sxClasses.legendButtonText}>{t('legend.re-arrange')}</Typography>
-          </Button>
-          <Button
-            variant="contained"
-            size="small"
-            sx={{ backgroundColor: '#F4F5FF' }}
-            startIcon={<AddIcon fontSize="small" sx={{ color: '#515BA5' }} />}
-          >
-            <Typography sx={sxClasses.legendButtonText}>{t('legend.add_layer')}</Typography>
-          </Button>
-        </Stack>
-      </Box>
-    );
-  }
-
-  const leftPanel = () => {
-    const legendItems = layerIds
-      .filter((layerId) => api.maps[mapId].layer.geoviewLayers[layerId])
-      .map((layerId) => {
-        const geoviewLayerInstance = api.maps[mapId].layer.geoviewLayers[layerId];
-
-        return (
-          <LegendItem
-            key={`layerKey-${layerId}`}
-            layerId={layerId}
-            geoviewLayerInstance={geoviewLayerInstance}
-            isRemoveable={isRemoveable}
-            canSetOpacity={canSetOpacity}
-            expandAll={expandAll}
-            hideAll={hideAll}
-          />
-        );
-      });
+  const numItems = 33;
+  /* START fake store data here */
 
+  function renderLegendLayersList() {
     return (
-      <div>
-        {showSelectedLayersPanel()}
-        {buttonsMenu()}
-        <List sx={{ width: '100%' }}>{legendItems}</List>
-      </div>
+      <List sx={{ width: '100%', padding: '20px' }}>
+        {legendLayers.map((item) => (
+          <LegendLayer layer={item} key={item.layerPath} />
+        ))}
+      </List>
     );
-  };
-
-  useEffect(() => {
-    if (selectedLegendItem) {
-      setIsSelectedLayersClicked(false);
-    }
-  }, [selectedLegendItem]);
-
-  function rightPanel() {
-    if (isSelectedLayersClicked) {
-      return <ShowSelectedLayers />;
-    }
-    if (selectedLegendItem) {
-      return (
-        <Item id="legend-details-container" sx={{ borderColor: 'primary.main', borderStyle: 'solid', borderWidth: '1px' }}>
-          <LegendItemDetails
-            key={`layerKey-${selectedLegendItem.layerId}`}
-            layerId={selectedLegendItem.layerId}
-            geoviewLayerInstance={selectedLegendItem?.geoviewLayerInstance}
-            isRemoveable={selectedLegendItem.isRemoveable}
-            canSetOpacity={selectedLegendItem.canSetOpacity}
-            expandAll={selectedLegendItem.expandAll}
-            hideAll={selectedLegendItem?.hideAll}
-            isParentVisible={selectedLegendItem.geoviewLayerInstance.getVisible(selectedLegendItem.layerConfigEntry!)}
-          />
-        </Item>
-      );
-    }
-
-    return null;
   }
 
   return (
-    <Box sx={sxClasses.legendContainer}>
-      <Grid container direction={{ xs: 'column', sm: 'row' }} spacing={{ xs: 1, sm: 4, md: 8 }}>
-        <Grid item xs={12} sm={6}>
-          {leftPanel()}
-        </Grid>
-        <Grid item xs={12} sm={6}>
-          {rightPanel()}
-        </Grid>
-      </Grid>
+    <Box sx={sxClasses.container}>
+      <Box>
+        <Typography sx={sxClasses.title}>
+          <strong>{t('legend.bold_selection')}</strong> {t('legend.overview_title')}
+        </Typography>
+        <Typography sx={sxClasses.subtitle}>
+          {numItems} {t('legend.items_available')}
+        </Typography>
+      </Box>
+      {renderLegendLayersList()}
     </Box>
   );
 }
diff --git a/packages/geoview-core/src/core/components/legend-2/selected-layers/selected-layers-details.tsx b/packages/geoview-core/src/core/components/legend-2/selected-layers/selected-layers-details.tsx
deleted file mode 100644
index 6f4f32ce256..00000000000
--- a/packages/geoview-core/src/core/components/legend-2/selected-layers/selected-layers-details.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Box, Grid } from '@/ui';
-
-export function ShowSelectedLayers(): JSX.Element {
-  return (
-    <Grid item xs={6}>
-      <Box>
-        <p>All selected Layers will be displayed here eventually.</p>
-      </Box>
-    </Grid>
-  );
-}
diff --git a/packages/geoview-core/src/core/components/map/map-style.ts b/packages/geoview-core/src/core/components/map/map-style.ts
new file mode 100644
index 00000000000..0a0483d2dc6
--- /dev/null
+++ b/packages/geoview-core/src/core/components/map/map-style.ts
@@ -0,0 +1,9 @@
+export const sxClasses = {
+  mapContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+    height: '100%',
+    position: 'relative',
+  },
+};
diff --git a/packages/geoview-core/src/core/components/map/map.tsx b/packages/geoview-core/src/core/components/map/map.tsx
index d8f5e85cbdc..89852bfe56f 100644
--- a/packages/geoview-core/src/core/components/map/map.tsx
+++ b/packages/geoview-core/src/core/components/map/map.tsx
@@ -10,8 +10,7 @@ import BaseLayer from 'ol/layer/Base';
 import Source from 'ol/source/Source';
 import { Extent } from 'ol/extent';
 
-import makeStyles from '@mui/styles/makeStyles';
-import { useMediaQuery } from '@mui/material';
+import { Box, useMediaQuery } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 
 import { useStore } from 'zustand';
@@ -33,16 +32,7 @@ import { MapViewer } from '@/geo/map/map-viewer';
 
 import { payloadIsABasemapLayerArray, payloadIsAMapViewProjection, PayloadBaseClass } from '@/api/events/payloads';
 import { TypeBasemapProps, TypeMapFeaturesConfig } from '../../types/global-types';
-
-const useStyles = makeStyles(() => ({
-  mapContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-    height: '100%',
-    position: 'relative',
-  },
-}));
+import { sxClasses } from './map-style';
 
 export function Map(mapFeaturesConfig: TypeMapFeaturesConfig): JSX.Element {
   const { map: mapConfig } = mapFeaturesConfig;
@@ -51,8 +41,6 @@ export function Map(mapFeaturesConfig: TypeMapFeaturesConfig): JSX.Element {
   // eslint-disable-next-line react/destructuring-assignment
   const mapId = mapFeaturesConfig.mapId ? mapFeaturesConfig.mapId : generateId('');
 
-  const classes = useStyles();
-
   // get ref to div element
   const mapElement = useRef<HTMLDivElement | undefined>();
 
@@ -107,7 +95,7 @@ export function Map(mapFeaturesConfig: TypeMapFeaturesConfig): JSX.Element {
     viewer.toggleMapInteraction(mapConfig.interaction);
   };
 
-  const initMap = async () => {
+  const initMap = (): void => {
     // create map
     const projection = api.projection.projections[mapConfig.viewSettings.projection];
 
@@ -236,7 +224,7 @@ export function Map(mapFeaturesConfig: TypeMapFeaturesConfig): JSX.Element {
 
   return (
     /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
-    <div id={`map-${mapId}`} ref={mapElement as MutableRefObject<HTMLDivElement>} className={classes.mapContainer} tabIndex={0}>
+    <Box id={`map-${mapId}`} ref={mapElement as MutableRefObject<HTMLDivElement>} sx={sxClasses.mapContainer} tabIndex={0}>
       {mapLoaded && (
         <>
           {northArrow && <NorthArrow />}
@@ -247,6 +235,6 @@ export function Map(mapFeaturesConfig: TypeMapFeaturesConfig): JSX.Element {
           {deviceSizeMedUp && overviewMap && overviewBaseMap && <OverviewMap />}
         </>
       )}
-    </div>
+    </Box>
   );
 }
diff --git a/packages/geoview-core/src/core/components/mouse-position/mouse-position-style.ts b/packages/geoview-core/src/core/components/mouse-position/mouse-position-style.ts
new file mode 100644
index 00000000000..262fa2deb9d
--- /dev/null
+++ b/packages/geoview-core/src/core/components/mouse-position/mouse-position-style.ts
@@ -0,0 +1,50 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  mousePosition: {
+    display: 'flex',
+    padding: theme.spacing(0, 4),
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    alignItems: 'center',
+    border: 'none',
+    width: 'auto',
+    backgroundColor: 'transparent !important',
+    height: 'inherit !important',
+    color: theme.palette.common.white,
+    lineHeight: 1.5,
+    ':hover': {
+      backgroundColor: 'transparent !important',
+      color: theme.palette.common.white,
+    },
+  },
+  mousePositionTextContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  mousePositionTextCheckmarkContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    '& span': {
+      fontSize: theme.typography.fontSize,
+      color: theme.palette.primary.light,
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+    },
+  },
+  mousePositionCheckmark: {
+    paddingRight: 5,
+    color: theme.palette.primary.light,
+  },
+  mousePositionText: {
+    fontSize: theme.typography.fontSize,
+    color: theme.palette.primary.light,
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+  },
+});
diff --git a/packages/geoview-core/src/core/components/mouse-position/mouse-position.tsx b/packages/geoview-core/src/core/components/mouse-position/mouse-position.tsx
index 680b14f59f8..6d1c6973eee 100644
--- a/packages/geoview-core/src/core/components/mouse-position/mouse-position.tsx
+++ b/packages/geoview-core/src/core/components/mouse-position/mouse-position.tsx
@@ -3,49 +3,15 @@ import { useState, useEffect, useContext } from 'react';
 import { Coordinate } from 'ol/coordinate';
 import { toLonLat } from 'ol/proj';
 
-import makeStyles from '@mui/styles/makeStyles';
-
 import { useTranslation } from 'react-i18next';
+import { useTheme } from '@mui/material';
 
 import { useStore } from 'zustand';
 import { getGeoViewStore } from '@/core/stores/stores-managers';
 
-import { Box, CheckIcon, Tooltip } from '@/ui';
+import { Box, Button, CheckIcon } from '@/ui';
 import { MapContext } from '@/core/app-start';
-
-const useStyles = makeStyles((theme) => ({
-  mousePositionContainer: {
-    display: 'flex',
-    padding: theme.spacing(0, 4),
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    alignItems: 'center',
-    border: 'none',
-    backgroundColor: 'transparent',
-  },
-  mousePositionTextContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  mousePositionTextCheckmarkContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  mousePositionCheckmark: {
-    paddingRight: 5,
-    color: theme.palette.primary.light,
-  },
-  mousePositionText: {
-    fontSize: theme.typography.fontSize,
-    color: theme.palette.primary.light,
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-  },
-}));
+import { getSxClasses } from './mouse-position-style';
 
 // degree char
 const deg = String.fromCharCode(176);
@@ -72,8 +38,8 @@ export function MousePosition(): JSX.Element {
 
   const { t } = useTranslation<string>();
 
-  // TODO: remove use style
-  const classes = useStyles();
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
 
   // internal component state
   const [positions, setPositions] = useState<string[]>(['', '', '']);
@@ -151,25 +117,30 @@ export function MousePosition(): JSX.Element {
   }, []);
 
   return (
-    <Tooltip title={t('mapnav.coordinates')!} placement="top">
-      <button type="button" onClick={() => switchPositionMode()} className={classes.mousePositionContainer}>
-        <Box className={classes.mousePositionTextContainer}>
-          <Box id="mousePositionWrapper" sx={{ display: !expanded ? 'none' : 'block', transition: 'display 1ms ease-in 300ms' }}>
-            {positions.map((position, index) => {
-              return (
-                // eslint-disable-next-line react/no-array-index-key
-                <Box className={classes.mousePositionTextCheckmarkContainer} key={index}>
-                  <CheckIcon sx={{ fontSize: 25, opacity: index === positionMode ? 1 : 0 }} className={classes.mousePositionCheckmark} />
-                  <span className={classes.mousePositionText}>{position}</span>
-                </Box>
-              );
-            })}
-          </Box>
-          <Box component="span" className={classes.mousePositionText} sx={{ display: expanded ? 'none' : 'block' }}>
-            {positions[positionMode]}
-          </Box>
+    <Button
+      type="text"
+      onClick={() => switchPositionMode()}
+      sx={sxClasses.mousePosition}
+      tooltip="mapnav.coordinates"
+      tooltipPlacement="top"
+      disableRipple
+    >
+      <Box sx={sxClasses.mousePositionTextContainer}>
+        <Box id="mousePositionWrapper" sx={{ display: !expanded ? 'none' : 'block', transition: 'display 1ms ease-in 300ms' }}>
+          {positions.map((position, index) => {
+            return (
+              // eslint-disable-next-line react/no-array-index-key
+              <Box sx={sxClasses.mousePositionTextCheckmarkContainer} key={index}>
+                <CheckIcon sx={{ fontSize: 25, opacity: index === positionMode ? 1 : 0, ...sxClasses.mousePositionCheckmark }} />
+                <span>{position}</span>
+              </Box>
+            );
+          })}
+        </Box>
+        <Box component="span" sx={{ display: expanded ? 'none' : 'block', ...sxClasses.mousePositionText }}>
+          {positions[positionMode]}
         </Box>
-      </button>
-    </Tooltip>
+      </Box>
+    </Button>
   );
 }
diff --git a/packages/geoview-core/src/core/components/north-arrow/north-arrow-icon.tsx b/packages/geoview-core/src/core/components/north-arrow/north-arrow-icon.tsx
index 00f981c81e4..2c9a9b0e6f6 100644
--- a/packages/geoview-core/src/core/components/north-arrow/north-arrow-icon.tsx
+++ b/packages/geoview-core/src/core/components/north-arrow/north-arrow-icon.tsx
@@ -1,10 +1,9 @@
-import { ClassNameMap } from '@mui/styles';
-
 /**
  * interface for north arrow icon properties
  */
 interface NorthArrowIconProps {
-  classes: ClassNameMap;
+  width: number;
+  height: number;
 }
 
 /**
@@ -13,7 +12,7 @@ interface NorthArrowIconProps {
  * @param {NorthArrowIconProps} props north arrow icon properties
  */
 export function NorthArrowIcon(props: NorthArrowIconProps): JSX.Element {
-  const { classes } = props;
+  const { width, height } = props;
 
   return (
     <svg
@@ -21,7 +20,7 @@ export function NorthArrowIcon(props: NorthArrowIconProps): JSX.Element {
       preserveAspectRatio="xMidYMid meet"
       viewBox="0 0 24 24"
       focusable="false"
-      className={classes.northArrow}
+      style={{ width, height }}
     >
       <g id="northarrow" transform="translate(-285.24 -142.234)">
         <path
diff --git a/packages/geoview-core/src/core/components/north-arrow/north-arrow-style.ts b/packages/geoview-core/src/core/components/north-arrow/north-arrow-style.ts
new file mode 100644
index 00000000000..986b72e57bc
--- /dev/null
+++ b/packages/geoview-core/src/core/components/north-arrow/north-arrow-style.ts
@@ -0,0 +1,12 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  northArrowContainer: {
+    left: '50%',
+    position: 'absolute',
+  },
+  northArrow: {
+    width: theme.overrides?.northArrow?.size.width,
+    height: theme.overrides?.northArrow?.size.height,
+  },
+});
diff --git a/packages/geoview-core/src/core/components/north-arrow/north-arrow.tsx b/packages/geoview-core/src/core/components/north-arrow/north-arrow.tsx
index 1f01f873b5e..7d1e8f6d877 100644
--- a/packages/geoview-core/src/core/components/north-arrow/north-arrow.tsx
+++ b/packages/geoview-core/src/core/components/north-arrow/north-arrow.tsx
@@ -6,7 +6,7 @@ import { Coordinate } from 'ol/coordinate';
 import { toLonLat, fromLonLat } from 'ol/proj';
 
 import { useTheme } from '@mui/material/styles';
-import makeStyles from '@mui/styles/makeStyles';
+import { Box } from '@mui/material';
 
 import { useStore } from 'zustand';
 import { getGeoViewStore } from '@/core/stores/stores-managers';
@@ -14,17 +14,7 @@ import { getGeoViewStore } from '@/core/stores/stores-managers';
 import { PROJECTION_NAMES } from '@/geo/projection/projection';
 import { MapContext } from '@/core/app-start';
 import { NorthArrowIcon, NorthPoleIcon } from './north-arrow-icon';
-
-const useStyles = makeStyles((theme) => ({
-  northArrowContainer: {
-    left: '50%',
-    position: 'absolute',
-  },
-  northArrow: {
-    width: theme.overrides?.northArrow?.size.width,
-    height: theme.overrides?.northArrow?.size.height,
-  },
-}));
+import { getSxClasses } from './north-arrow-style';
 
 // The north pole position use for north arrow marker and get north arrow rotation angle
 // north value (set longitude to be half of Canada extent (142° W, 52° W)) - projection central meridian is -95
@@ -39,10 +29,8 @@ export function NorthArrow(): JSX.Element {
   const mapConfig = useContext(MapContext);
   const { mapId } = mapConfig;
 
-  // access transitions
-  const defaultTheme = useTheme();
-  // TODO: remove make style
-  const classes = useStyles();
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
 
   // do not use useState for item used inside function only without rendering... use useRef
   const isNorthFixedValue = useRef(false);
@@ -250,23 +238,23 @@ export function NorthArrow(): JSX.Element {
   }, []);
 
   return mapProjection.current === PROJECTION_NAMES.LCC ? (
-    <div
+    <Box
       ref={northArrowRef}
-      className={classes.northArrowContainer}
+      sx={sxClasses.northArrowContainer}
       style={{
-        transition: defaultTheme.transitions.create(['all', 'transform'], {
-          duration: defaultTheme.transitions.duration.standard,
-          easing: defaultTheme.transitions.easing.easeOut,
+        transition: theme.transitions.create(['all', 'transform'], {
+          duration: theme.transitions.duration.standard,
+          easing: theme.transitions.easing.easeOut,
         }),
         transform: `rotate(${rotationAngle.angle}deg)`,
         visibility: isNorthVisible ? 'hidden' : 'visible',
         left: northOffset,
       }}
     >
-      <NorthArrowIcon classes={classes} />
-    </div>
+      <NorthArrowIcon width={sxClasses.northArrow.width} height={sxClasses.northArrow.height} />
+    </Box>
   ) : (
-    <div />
+    <Box />
   );
 }
 
diff --git a/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx b/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx
index e65d9b851fb..cb151ebbcda 100644
--- a/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx
+++ b/packages/geoview-core/src/core/components/overview-map/overview-map-toggle.tsx
@@ -7,6 +7,7 @@ import makeStyles from '@mui/styles/makeStyles';
 
 import { ChevronLeftIcon, Tooltip } from '@/ui';
 
+// TODO: We need to find solution to remove makeStyles with either plain css or material ui.
 const useStyles = makeStyles((theme) => ({
   toggleBtn: {
     transform: 'rotate(45deg)',
diff --git a/packages/geoview-core/src/core/components/overview-map/overview-map.tsx b/packages/geoview-core/src/core/components/overview-map/overview-map.tsx
index 4b763de2c47..05d169fc362 100644
--- a/packages/geoview-core/src/core/components/overview-map/overview-map.tsx
+++ b/packages/geoview-core/src/core/components/overview-map/overview-map.tsx
@@ -26,6 +26,7 @@ export const MINIMAP_SIZE = {
   height: '150px',
 };
 
+// TODO: We need to find solution to remove makeStyles with either plain css or material ui.
 const useStyles = makeStyles((theme) => ({
   overviewMap: {
     bottom: 'auto',
diff --git a/packages/geoview-core/src/core/components/scale/scale-style.ts b/packages/geoview-core/src/core/components/scale/scale-style.ts
new file mode 100644
index 00000000000..540abc2a90e
--- /dev/null
+++ b/packages/geoview-core/src/core/components/scale/scale-style.ts
@@ -0,0 +1,48 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  scaleControl: {
+    display: 'none',
+  },
+  scaleContainer: {
+    display: 'flex',
+    backgroundColor: 'transparent',
+    border: 'none',
+    height: '100%',
+    ':hover': {
+      backgroundColor: 'transparent',
+      color: theme.palette.common.white,
+    },
+  },
+  scaleExpandedContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    height: '100%',
+    gap: theme.spacing(5),
+  },
+  scaleExpandedCheckmarkText: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '18px',
+    maxHeight: '18px',
+  },
+  scaleText: {
+    fontSize: theme.typography.fontSize,
+    color: theme.palette.primary.light,
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    border: '1px solid',
+    borderColor: theme.palette.primary.light,
+    borderTop: 'none',
+    borderLeft: 'none',
+    borderRight: 'none',
+  },
+  scaleCheckmark: {
+    paddingRight: 5,
+    color: theme.palette.primary.light,
+  },
+});
diff --git a/packages/geoview-core/src/core/components/scale/scale.tsx b/packages/geoview-core/src/core/components/scale/scale.tsx
index 66c66c9c2bd..a32e6d252ab 100644
--- a/packages/geoview-core/src/core/components/scale/scale.tsx
+++ b/packages/geoview-core/src/core/components/scale/scale.tsx
@@ -3,56 +3,13 @@ import { useContext, useEffect, useState } from 'react';
 import { ScaleLine } from 'ol/control';
 import { useTranslation } from 'react-i18next';
 
-import makeStyles from '@mui/styles/makeStyles';
-
+import { useTheme } from '@mui/material';
 import { useStore } from 'zustand';
 import { getGeoViewStore } from '@/core/stores/stores-managers';
 
 import { MapContext } from '@/core/app-start';
-import { CheckIcon, Tooltip, Box } from '@/ui';
-
-const useStyles = makeStyles((theme) => ({
-  scaleControl: {
-    display: 'none',
-  },
-  scaleContainer: {
-    display: 'flex',
-    backgroundColor: 'transparent',
-    border: 'none',
-    height: '100%',
-  },
-  scaleExpandedContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    justifyContent: 'center',
-    height: '100%',
-    gap: theme.spacing(5),
-  },
-  scaleExpandedCheckmarkText: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: '18px',
-    maxHeight: '18px',
-  },
-  scaleText: {
-    fontSize: theme.typography.fontSize,
-    color: theme.palette.primary.light,
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    border: '1px solid',
-    borderColor: theme.palette.primary.light,
-    borderTop: 'none',
-    borderLeft: 'none',
-    borderRight: 'none',
-  },
-  scaleCheckmark: {
-    paddingRight: 5,
-    color: theme.palette.primary.light,
-  },
-}));
+import { CheckIcon, Tooltip, Box, Button } from '@/ui';
+import { getSxClasses } from './scale-style';
 
 interface TypeScale {
   scaleId: string;
@@ -81,8 +38,9 @@ export function Scale(): JSX.Element {
   const expanded = useStore(getGeoViewStore(mapId), (state) => state.footerBarState.expanded);
   const mapElement = useStore(getGeoViewStore(mapId), (state) => state.mapState.mapElement);
 
-  // TODO: remove make style
-  const classes = useStyles();
+  const theme = useTheme();
+
+  const sxClasses = getSxClasses(theme);
 
   /**
    * Switch the scale mode
@@ -161,39 +119,35 @@ export function Scale(): JSX.Element {
   return (
     <Tooltip title={t('mapnav.scale')!} placement="top">
       <Box sx={{ minWidth: 120 }}>
-        <div id={`${mapId}-scaleControlBar`} className={classes.scaleControl} />
-        <div id={`${mapId}-scaleControlLine`} className={classes.scaleControl} />
-        <button type="button" onClick={() => switchScale()} className={classes.scaleContainer}>
+        <Box id={`${mapId}-scaleControlBar`} sx={sxClasses.scaleControl} />
+        <Box id={`${mapId}-scaleControlLine`} sx={sxClasses.scaleControl} />
+        <Button onClick={() => switchScale()} type="text" sx={sxClasses.scaleContainer} disableRipple>
           {expanded ? (
-            <div className={classes.scaleExpandedContainer}>
+            <Box sx={sxClasses.scaleExpandedContainer}>
               {scaleValues.map((value, index) => {
                 return (
-                  <div className={classes.scaleExpandedCheckmarkText} key={value.scaleId}>
-                    <CheckIcon sx={{ fontSize: 25, opacity: scaleMode === index ? 1 : 0 }} className={classes.scaleCheckmark} />
-                    <span
-                      className={classes.scaleText}
-                      style={{
-                        borderBottom: !value.borderBottom ? 'none' : '1px solid',
-                      }}
-                    >
+                  <Box sx={sxClasses.scaleExpandedCheckmarkText} key={value.scaleId}>
+                    <CheckIcon sx={{ ...sxClasses.scaleCheckmark, fontSize: 25, opacity: scaleMode === index ? 1 : 0 }} />
+                    <Box component="span" sx={{ ...sxClasses.scaleText, borderBottom: !value.borderBottom ? 'none' : '1px solid' }}>
                       {value.label}
-                    </span>
-                  </div>
+                    </Box>
+                  </Box>
                 );
               })}
-            </div>
+            </Box>
           ) : (
-            <span
-              className={classes.scaleText}
-              style={{
+            <Box
+              component="span"
+              sx={{
+                ...sxClasses.scaleText,
                 borderBottom: !scaleValues[scaleMode].borderBottom ? 'none' : '1px solid',
                 width: !scaleValues[scaleMode].borderBottom ? 'inherit' : lineWidth,
               }}
             >
               {scaleValues[scaleMode].label}
-            </span>
+            </Box>
           )}
-        </button>
+        </Button>
       </Box>
     </Tooltip>
   );
diff --git a/packages/geoview-core/src/core/containers/focus-trap.tsx b/packages/geoview-core/src/core/containers/focus-trap.tsx
index 829f5ce2391..93ce51217a1 100644
--- a/packages/geoview-core/src/core/containers/focus-trap.tsx
+++ b/packages/geoview-core/src/core/containers/focus-trap.tsx
@@ -178,8 +178,9 @@ export function FocusTrapDialog(props: FocusTrapProps): JSX.Element {
             autoFocus
             onClick={handleEnable}
             type="text"
-            style={{
+            sx={{
               width: 'initial',
+              textTransform: 'none',
             }}
           >
             {t('keyboardnav.focusdialog.button.enable')}
@@ -190,8 +191,9 @@ export function FocusTrapDialog(props: FocusTrapProps): JSX.Element {
             tooltipPlacement="top-end"
             onClick={handleSkip}
             type="text"
-            style={{
+            sx={{
               width: 'initial',
+              textTransform: 'none',
             }}
           >
             {t('keyboardnav.focusdialog.button.skip')}
diff --git a/packages/geoview-core/src/core/stores/geoview-store.ts b/packages/geoview-core/src/core/stores/geoview-store.ts
index 06407eb09af..584ee8cf6ff 100644
--- a/packages/geoview-core/src/core/stores/geoview-store.ts
+++ b/packages/geoview-core/src/core/stores/geoview-store.ts
@@ -13,7 +13,8 @@ import { ObjectEvent } from 'ol/Object';
 import { toLonLat } from 'ol/proj';
 
 import { TypeMapFeaturesConfig, TypeValidMapProjectionCodes } from '@/core/types/global-types';
-import { TypeLegendItemProps } from '../components/legend-2/types';
+import { TypeArrayOfLayerData } from '@/core/components/details/details';
+import { TypeLegendItemProps, TypeLegendLayer } from '@/core/components/layers/types';
 
 import { TypeMapMouseInfo } from '@/api/events/payloads';
 import { TypeDisplayLanguage, TypeInteraction } from '@/geo/map/map-schema-types';
@@ -65,6 +66,9 @@ export interface INotificationsState {
 export interface ILegendState {
   selectedItem?: TypeLegendItemProps;
   selectedIsVisible: boolean;
+  selectedLayers: Record<string, { layer: string; icon: string }[]>;
+  currentRightPanelDisplay: 'overview' | 'layer-details' | 'none';
+  legendLayers: TypeLegendLayer[];
 }
 
 export interface IMapDataTableState {
@@ -87,6 +91,11 @@ export interface IMapDataTableState {
   setToolbarRowSelectedMessage: (message: string) => void;
 }
 
+export interface IDetailsState {
+  layerDataArray: TypeArrayOfLayerData;
+  selectedLayerPath: string;
+}
+
 export interface IGeoViewState {
   displayLanguage: TypeDisplayLanguage;
   isCrosshairsActive: boolean;
@@ -99,6 +108,7 @@ export interface IGeoViewState {
   legendState: ILegendState;
   mapState: IMapState;
   notificationState: INotificationsState;
+  detailsState: IDetailsState;
   dataTableState: IMapDataTableState;
   setMapConfig: (config: TypeMapFeaturesConfig) => void;
   onMapLoaded: (mapElem: OLMap) => void;
@@ -185,7 +195,14 @@ export const geoViewStoreDefinition = (
     },
     legendState: {
       selectedItem: undefined,
+      currentRightPanelDisplay: 'none',
       selectedIsVisible: true,
+      selectedLayers: {},
+      legendLayers: [],
+    },
+    detailsState: {
+      layerDataArray: [],
+      selectedLayerPath: '',
     },
     notificationState: {
       notifications: [],
diff --git a/packages/geoview-core/src/core/types/global-types.ts b/packages/geoview-core/src/core/types/global-types.ts
index 3e3cb32019c..c94f56b454a 100644
--- a/packages/geoview-core/src/core/types/global-types.ts
+++ b/packages/geoview-core/src/core/types/global-types.ts
@@ -4,7 +4,6 @@ import { createRoot } from 'react-dom/client';
 import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { useMediaQuery } from '@mui/material';
-import makeStyles from '@mui/styles/makeStyles';
 import { API } from '@/api/api';
 import * as UI from '../../ui';
 import { AbstractPlugin } from '@/api/plugin/abstract-plugin';
@@ -103,7 +102,6 @@ export type TypeCallback = (callback: () => void) => void;
 export type TypeCGPVUI = {
   useTheme: typeof useTheme;
   useMediaQuery: typeof useMediaQuery;
-  makeStyles: typeof makeStyles;
   elements: typeof UI;
 };
 
diff --git a/packages/geoview-core/src/core/utils/utilities.ts b/packages/geoview-core/src/core/utils/utilities.ts
index f488546e333..75ca4223e13 100644
--- a/packages/geoview-core/src/core/utils/utilities.ts
+++ b/packages/geoview-core/src/core/utils/utilities.ts
@@ -544,7 +544,7 @@ function _whenThisThenThat<T>(
   startDate: Date,
   checkFrequency: number,
   timeout: number
-) {
+): void {
   // Check if we're good
   const v = checkCallback();
   if (v) {
@@ -578,7 +578,7 @@ export function whenThisThenThat<T>(
   failCallback: (reason?: any) => void,
   checkFrequency?: number,
   timeout?: number
-) {
+): void {
   const startDate = new Date();
   if (!checkFrequency) checkFrequency = 100; // Check every 100 milliseconds by default
   if (!timeout) timeout = 10000; // Timeout after 10 seconds by default
@@ -592,7 +592,7 @@ export function whenThisThenThat<T>(
  * @param checkFrequency the frequency in milliseconds to check for an update (defaults to 100 milliseconds)
  * @param timeout the duration in milliseconds until the task is aborted (defaults to 10 seconds)
  */
-export async function whenThisThenAsync<T>(checkCallback: () => T, checkFrequency?: number, timeout?: number) {
+export function whenThisThen<T>(checkCallback: () => T, checkFrequency?: number, timeout?: number): Promise<T> {
   return new Promise<T>((resolve, reject) => {
     // Redirect
     whenThisThenThat(checkCallback, resolve, reject, checkFrequency, timeout);
diff --git a/packages/geoview-core/src/geo/index.ts b/packages/geoview-core/src/geo/index.ts
index a7d5f8c1c3e..35c8233d129 100644
--- a/packages/geoview-core/src/geo/index.ts
+++ b/packages/geoview-core/src/geo/index.ts
@@ -1,4 +1,5 @@
 export * from './interaction/draw';
+export * from './interaction/extent';
 export * from './interaction/interaction';
 export * from './interaction/modify';
 export * from './interaction/snap';
diff --git a/packages/geoview-core/src/geo/interaction/draw.ts b/packages/geoview-core/src/geo/interaction/draw.ts
index 999ad347c06..26985a96644 100644
--- a/packages/geoview-core/src/geo/interaction/draw.ts
+++ b/packages/geoview-core/src/geo/interaction/draw.ts
@@ -2,12 +2,13 @@ import { Type as OLGeomType } from 'ol/geom/Geometry';
 import { Draw as OLDraw } from 'ol/interaction';
 import { DrawEvent as OLDrawEvent, Options as OLDrawOptions } from 'ol/interaction/Draw';
 import { FlatStyle } from 'ol/style/flat';
+
 import { Interaction, InteractionOptions } from './interaction';
 import { api } from '@/app';
 import { EVENT_NAMES } from '@/api/events/event-types';
 import { drawPayload } from '@/api/events/payloads';
-import { TypeFeatureStyle } from '../layer/geometry/geometry-types';
-import { GeoUtilities } from '../utils/utilities';
+import { TypeFeatureStyle } from '@/geo/layer/geometry/geometry-types';
+import { GeoUtilities } from '@/geo//utils/utilities';
 
 /**
  * Supported options for drawing interactions
diff --git a/packages/geoview-core/src/geo/interaction/extent.ts b/packages/geoview-core/src/geo/interaction/extent.ts
new file mode 100644
index 00000000000..816d1993d4e
--- /dev/null
+++ b/packages/geoview-core/src/geo/interaction/extent.ts
@@ -0,0 +1,75 @@
+import { Extent as OLExtent } from 'ol/interaction';
+import { ExtentEvent as OLExtentEvent, Options as OLExtentOptions } from 'ol/interaction/Extent';
+import { shiftKeyOnly } from 'ol/events/condition';
+
+import { Interaction, InteractionOptions } from './interaction';
+import { api } from '@/app';
+import { EVENT_NAMES } from '@/api/events/event-types';
+import { extentPayload } from '@/api/events/payloads';
+import { TypeFeatureStyle } from '@/geo/layer/geometry/geometry-types';
+import { GeoUtilities } from '@/geo/utils/utilities';
+
+/**
+ * Supported options for extent interactions
+ */
+export type ExtentOptions = InteractionOptions & {
+  boxStyle?: TypeFeatureStyle;
+  pixelTolerance?: number;
+};
+
+/**
+ * Class used for drawing extent on a map
+ *
+ * @exports
+ * @class Extent
+ */
+export class Extent extends Interaction {
+  // The embedded Open Layers Extent component
+  ol_extent: OLExtent;
+
+  /**
+   * Initialize Extent component
+   * @param {ExtentOptions} options object to configure the initialization of the Extent interaction
+   */
+  constructor(options: ExtentOptions) {
+    super(options);
+
+    // The OpenLayers Extent options
+    const olOptions: OLExtentOptions = {
+      condition: shiftKeyOnly,
+      boxStyle: new GeoUtilities().convertTypeFeatureStyleToOpenLayersStyle(options.boxStyle),
+      pixelTolerance: options.pixelTolerance || 0,
+    };
+
+    // Activate the OpenLayers Extent module
+    this.ol_extent = new OLExtent(olOptions);
+
+    // Wire handler when drawing is changed
+    this.ol_extent.on('extentchanged', this.onExtentChanged);
+  }
+
+  /**
+   * Starts the interaction on the map
+   */
+  public startInteraction() {
+    // Redirect
+    super.startInteraction(this.ol_extent);
+  }
+
+  /**
+   * Stops the interaction on the map
+   */
+  public stopInteraction() {
+    // Redirect
+    super.stopInteraction(this.ol_extent);
+  }
+
+  /**
+   * Handles when the extent has changed
+   * @param {OLExtentEvent} e object representing the Open Layers event from the interaction
+   */
+  onExtentChanged = (e: OLExtentEvent) => {
+    // Raises EVENT_EXTENT event via the api
+    api.event.emit(extentPayload(EVENT_NAMES.INTERACTION.EVENT_EXTENT, this.mapViewer.mapId, e));
+  };
+}
diff --git a/packages/geoview-core/src/geo/interaction/interaction.ts b/packages/geoview-core/src/geo/interaction/interaction.ts
index 8e57bb30db5..4c30537adad 100644
--- a/packages/geoview-core/src/geo/interaction/interaction.ts
+++ b/packages/geoview-core/src/geo/interaction/interaction.ts
@@ -1,6 +1,7 @@
 import { Interaction as OLInteraction } from 'ol/interaction';
 // import OLBaseEvent from 'ol/events/Event'; // TODO: Enhancements - Interaction - Uncomment to leverage the events further
-import { MapViewer } from '../map/map-viewer';
+
+import { MapViewer } from '@/geo/map/map-viewer';
 
 /**
  * Options for interactions
diff --git a/packages/geoview-core/src/geo/interaction/modify.ts b/packages/geoview-core/src/geo/interaction/modify.ts
index 6310463d70e..1ae910121ca 100644
--- a/packages/geoview-core/src/geo/interaction/modify.ts
+++ b/packages/geoview-core/src/geo/interaction/modify.ts
@@ -3,12 +3,13 @@ import { ModifyEvent as OLModifyEvent, Options as OLModifyOptions } from 'ol/int
 import Collection from 'ol/Collection';
 import Feature from 'ol/Feature';
 import { FlatStyle } from 'ol/style/flat';
+
 import { Interaction, InteractionOptions } from './interaction';
 import { api } from '@/app';
 import { EVENT_NAMES } from '@/api/events/event-types';
 import { modifyPayload } from '@/api/events/payloads';
-import { TypeFeatureStyle } from '../layer/geometry/geometry-types';
-import { GeoUtilities } from '../utils/utilities';
+import { TypeFeatureStyle } from '@/geo/layer/geometry/geometry-types';
+import { GeoUtilities } from '@/geo/utils/utilities';
 
 /**
  * Supported options for modify interactions
diff --git a/packages/geoview-core/src/geo/interaction/select.ts b/packages/geoview-core/src/geo/interaction/select.ts
index 383fcbb5dc1..99a2373effb 100644
--- a/packages/geoview-core/src/geo/interaction/select.ts
+++ b/packages/geoview-core/src/geo/interaction/select.ts
@@ -2,12 +2,13 @@ import { Select as OLSelect } from 'ol/interaction';
 import { SelectEvent as OLSelectEvent, Options as OLSelectOptions } from 'ol/interaction/Select';
 import Collection from 'ol/Collection';
 import Feature from 'ol/Feature';
+
 import { Interaction, InteractionOptions } from './interaction';
 import { api } from '@/app';
 import { EVENT_NAMES } from '@/api/events/event-types';
 import { selectPayload } from '@/api/events/payloads';
-import { TypeFeatureStyle } from '../layer/geometry/geometry-types';
-import { GeoUtilities } from '../utils/utilities';
+import { TypeFeatureStyle } from '@/geo/layer/geometry/geometry-types';
+import { GeoUtilities } from '@/geo/utils/utilities';
 
 /**
  * Supported options for select interactions
diff --git a/packages/geoview-core/src/geo/interaction/snap.ts b/packages/geoview-core/src/geo/interaction/snap.ts
index 4cb2bec185b..941243a6b69 100644
--- a/packages/geoview-core/src/geo/interaction/snap.ts
+++ b/packages/geoview-core/src/geo/interaction/snap.ts
@@ -2,6 +2,7 @@ import { Snap as OLSnap } from 'ol/interaction';
 import { Options as OLSnapOptions } from 'ol/interaction/Snap';
 import Collection from 'ol/Collection';
 import Feature from 'ol/Feature';
+
 import { Interaction, InteractionOptions } from './interaction';
 
 /**
diff --git a/packages/geoview-core/src/geo/interaction/translate.ts b/packages/geoview-core/src/geo/interaction/translate.ts
index 22885dc4831..1dbb7007728 100644
--- a/packages/geoview-core/src/geo/interaction/translate.ts
+++ b/packages/geoview-core/src/geo/interaction/translate.ts
@@ -2,6 +2,7 @@ import { Translate as OLTranslate } from 'ol/interaction';
 import { TranslateEvent as OLTranslateEvent, Options as OLTranslateOptions } from 'ol/interaction/Translate';
 import Collection from 'ol/Collection';
 import Feature from 'ol/Feature';
+
 import { Interaction, InteractionOptions } from './interaction';
 import { api } from '@/app';
 import { EVENT_NAMES } from '@/api/events/event-types';
diff --git a/packages/geoview-core/src/geo/layer/basemap/basemap.ts b/packages/geoview-core/src/geo/layer/basemap/basemap.ts
index 8155c9c5d89..e366090e220 100644
--- a/packages/geoview-core/src/geo/layer/basemap/basemap.ts
+++ b/packages/geoview-core/src/geo/layer/basemap/basemap.ts
@@ -385,7 +385,7 @@ export class Basemap {
    *
    * @param {TypeBasemapOptions} basemapOptions basemap options
    */
-  async createCoreBasemap(basemapOptions: TypeBasemapOptions, projection?: number): Promise<TypeBasemapProps | undefined> {
+  createCoreBasemap(basemapOptions: TypeBasemapOptions, projection?: number): Promise<TypeBasemapProps | undefined> {
     // eslint-disable-next-line no-async-promise-executor
     return new Promise(async (resolve) => {
       const basemapLayers: TypeBasemapLayer[] = [];
diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts b/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts
index f5102497b2b..34ace9af576 100644
--- a/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts
+++ b/packages/geoview-core/src/geo/layer/geoview-layers/abstract-geoview-layers.ts
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable no-console */
 /* eslint-disable no-param-reassign */
 import BaseLayer from 'ol/layer/Base';
 import Collection from 'ol/Collection';
@@ -248,7 +250,7 @@ type TypeLayerSetHandlerFunctions = {
 // ******************************************************************************************************************************
 export abstract class AbstractGeoViewLayer {
   /** Flag used to indicate the layer's phase */
-  layerPhase = 'newInstance';
+  layerPhase = '';
 
   /** The unique identifier of the map on which the GeoView layer will be drawn. */
   mapId: string;
@@ -287,8 +289,9 @@ export abstract class AbstractGeoViewLayer {
   layerLoadError: { layer: string; consoleMessage: string }[] = [];
 
   /**
-   * The vector or raster layer structure to be displayed for this GeoView class. Initial value is null indicating that the layers
-   * have not been created.
+   * The structure of the vector or raster layers to be displayed for this GeoView class. This property points to the root of the layer tree,
+   * unlike the olLayer (singular) property stored in the layer configuration entries list, which points to a node or leaf in the tree.
+   * The initial value of olLayers is null, indicating that the layer tree has not been created.
    */
   olLayers: BaseLayer | null = null;
 
@@ -477,51 +480,41 @@ export abstract class AbstractGeoViewLayer {
    * to return the descriptive information of all the features in a tolerance radius. This information will be used to populate
    * the details-panel.
    */
-  createGeoViewLayers(): Promise<void> {
-    const promisedExecution = new Promise<void>((resolve) => {
-      this.changeLayerPhase('createGeoViewLayers');
-      if (this.olLayers === null) {
-        this.getAdditionalServiceDefinition()
-          .then(() => {
-            this.processListOfLayerEntryConfig(this.listOfLayerEntryConfig).then((layersCreated) => {
-              this.olLayers = layersCreated;
-              resolve();
-            });
-          })
-          .catch((reason) => {
-            // eslint-disable-next-line no-console
-            console.log(reason);
-            resolve();
-          });
-      } else {
-        const trans = i18n.getFixedT(api.maps[this.mapId].displayLanguage);
-        const message = replaceParams([this.mapId], trans('validation.layer.createtwice'));
-        showError(this.mapId, message);
-
-        // eslint-disable-next-line no-console
-        console.log(`Can not execute twice the createGeoViewLayers method for the map ${this.mapId}`);
-        resolve();
+  async createGeoViewLayers(): Promise<void> {
+    if (this.olLayers === null) {
+      try {
+        this.changeLayerPhase('createGeoViewLayers');
+        await this.getAdditionalServiceDefinition();
+        this.olLayers = await this.processListOfLayerEntryConfig(this.listOfLayerEntryConfig);
+      } catch (error) {
+        console.log(error);
       }
-    });
-    return promisedExecution;
+    } else {
+      const trans = i18n.getFixedT(api.maps[this.mapId].displayLanguage);
+      const message = replaceParams([this.mapId], trans('validation.layer.createtwice'));
+      showError(this.mapId, message);
+
+      // eslint-disable-next-line no-console
+      console.log(`Can not execute twice the createGeoViewLayers method for the map ${this.mapId}`);
+    }
   }
 
   /** ***************************************************************************************************************************
    * This method reads from the metadataAccessPath additional information to complete the GeoView layer configuration.
    * If the GeoView layer does not have a service definition, this method does nothing.
    */
-  protected getAdditionalServiceDefinition(): Promise<void> {
+  protected async getAdditionalServiceDefinition(): Promise<void> {
     this.changeLayerPhase('getAdditionalServiceDefinition');
-    const promisedExecution = new Promise<void>((resolve) => {
-      this.getServiceMetadata().then(() => {
-        if (this.listOfLayerEntryConfig.length) {
-          // Recursively process the configuration tree of layer entries by removing layers in error and processing valid layers.
-          this.validateListOfLayerEntryConfig(this.listOfLayerEntryConfig);
-          this.processListOfLayerEntryMetadata(this.listOfLayerEntryConfig).then(() => resolve());
-        } else resolve(); // no layer entry.
-      });
-    });
-    return promisedExecution;
+    try {
+      await this.getServiceMetadata();
+      if (this.listOfLayerEntryConfig.length) {
+        // Recursively process the configuration tree of layer entries by removing layers in error and processing valid layers.
+        this.validateListOfLayerEntryConfig(this.listOfLayerEntryConfig);
+        await this.processListOfLayerEntryMetadata(this.listOfLayerEntryConfig);
+      }
+    } catch (error) {
+      console.log(error);
+    }
   }
 
   /** ***************************************************************************************************************************
@@ -529,29 +522,24 @@ export abstract class AbstractGeoViewLayer {
    *
    * @returns {Promise<void>} A promise that the execution is completed.
    */
-  protected getServiceMetadata(): Promise<void> {
+  protected async getServiceMetadata(): Promise<void> {
     this.changeLayerPhase('getServiceMetadata');
-    const promisedExecution = new Promise<void>((resolve) => {
-      const metadataUrl = getLocalizedValue(this.metadataAccessPath, this.mapId);
-      if (metadataUrl) {
-        getXMLHttpRequest(`${metadataUrl}?f=json`)
-          .then((metadataString) => {
-            if (metadataString === '{}') {
-              api.geoUtilities.setAllLayerStatusToError(this, this.listOfLayerEntryConfig, 'Unable to read metadata');
-            } else {
-              this.metadata = toJsonObject(JSON.parse(metadataString));
-              const { copyrightText } = this.metadata;
-              if (copyrightText) this.attributions.push(copyrightText as string);
-              resolve();
-            }
-          })
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          .catch((reason) => {
-            api.geoUtilities.setAllLayerStatusToError(this, this.listOfLayerEntryConfig, 'Unable to read metadata');
-          });
-      } else resolve();
-    });
-    return promisedExecution;
+    const metadataUrl = getLocalizedValue(this.metadataAccessPath, this.mapId);
+    if (metadataUrl) {
+      try {
+        const metadataString = await getXMLHttpRequest(`${metadataUrl}?f=json`);
+        if (metadataString === '{}') {
+          api.geoUtilities.setAllLayerStatusToError(this, this.listOfLayerEntryConfig, 'Unable to read metadata');
+        } else {
+          this.metadata = toJsonObject(JSON.parse(metadataString));
+          const { copyrightText } = this.metadata;
+          if (copyrightText) this.attributions.push(copyrightText as string);
+        }
+      } catch (error) {
+        console.log(error);
+        api.geoUtilities.setAllLayerStatusToError(this, this.listOfLayerEntryConfig, 'Unable to read metadata');
+      }
+    }
   }
 
   /** ***************************************************************************************************************************
@@ -569,11 +557,9 @@ export abstract class AbstractGeoViewLayer {
    *
    * @returns {Promise<void>} A promise that the execution is completed.
    */
-  protected processListOfLayerEntryMetadata(
-    listOfLayerEntryConfig: TypeListOfLayerEntryConfig = this.listOfLayerEntryConfig
-  ): Promise<void> {
+  protected async processListOfLayerEntryMetadata(listOfLayerEntryConfig: TypeListOfLayerEntryConfig): Promise<void> {
     this.changeLayerPhase('processListOfLayerEntryMetadata');
-    const promisedListOfLayerEntryProcessed = new Promise<void>((resolve) => {
+    try {
       const promisedAllLayerDone: Promise<void>[] = [];
       listOfLayerEntryConfig.forEach((layerEntryConfig: TypeLayerEntryConfig) => {
         if (layerEntryIsGroupLayer(layerEntryConfig))
@@ -581,9 +567,10 @@ export abstract class AbstractGeoViewLayer {
           else promisedAllLayerDone.push(this.processListOfLayerEntryMetadata(layerEntryConfig.listOfLayerEntryConfig));
         else promisedAllLayerDone.push(this.processLayerMetadata(layerEntryConfig));
       });
-      Promise.all(promisedAllLayerDone).then(() => resolve());
-    });
-    return promisedListOfLayerEntryProcessed;
+      await Promise.all(promisedAllLayerDone);
+    } catch (error) {
+      console.log(error);
+    }
   }
 
   /** ***************************************************************************************************************************
@@ -595,13 +582,13 @@ export abstract class AbstractGeoViewLayer {
    *
    * @returns {Promise<void>} A promise that the vector layer configuration has its metadata and group layers processed.
    */
-  private processMetadataGroupLayer(layerEntryConfig: TypeLayerGroupEntryConfig): Promise<void> {
-    const promisedListOfLayerEntryProcessed = new Promise<void>((resolve) => {
-      this.processLayerMetadata(layerEntryConfig).then(() => {
-        this.processListOfLayerEntryMetadata(layerEntryConfig.listOfLayerEntryConfig!).then(() => resolve());
-      });
-    });
-    return promisedListOfLayerEntryProcessed;
+  private async processMetadataGroupLayer(layerEntryConfig: TypeLayerGroupEntryConfig): Promise<void> {
+    try {
+      await this.processLayerMetadata(layerEntryConfig);
+      await this.processListOfLayerEntryMetadata(layerEntryConfig.listOfLayerEntryConfig!);
+    } catch (error) {
+      console.log(error);
+    }
   }
 
   /** ***************************************************************************************************************************
@@ -613,12 +600,9 @@ export abstract class AbstractGeoViewLayer {
    * @returns {Promise<void>} A promise that the vector layer configuration has its metadata processed.
    */
   protected processLayerMetadata(layerEntryConfig: TypeLayerEntryConfig): Promise<void> {
-    const promiseOfExecution = new Promise<void>((resolve) => {
-      if (!layerEntryConfig.source) layerEntryConfig.source = {};
-      if (!layerEntryConfig.source.featureInfo) layerEntryConfig.source.featureInfo = { queryable: true };
-      resolve();
-    });
-    return promiseOfExecution;
+    if (!layerEntryConfig.source) layerEntryConfig.source = {};
+    if (!layerEntryConfig.source.featureInfo) layerEntryConfig.source.featureInfo = { queryable: true };
+    return Promise.resolve();
   }
 
   /** ***************************************************************************************************************************
@@ -630,135 +614,121 @@ export abstract class AbstractGeoViewLayer {
    *
    * @returns {Promise<BaseLayer | null>} The promise that the layers were processed.
    */
-  protected processListOfLayerEntryConfig(
+  protected async processListOfLayerEntryConfig(
     listOfLayerEntryConfig: TypeListOfLayerEntryConfig,
     layerGroup?: LayerGroup
   ): Promise<BaseLayer | null> {
     this.changeLayerPhase('processListOfLayerEntryConfig');
-    const promisedListOfLayerEntryProcessed = new Promise<BaseLayer | null>((resolve) => {
+    try {
       if (listOfLayerEntryConfig.length === 1) {
         if (layerEntryIsGroupLayer(listOfLayerEntryConfig[0])) {
           const newLayerGroup = this.createLayerGroup(listOfLayerEntryConfig[0]);
-          this.processListOfLayerEntryConfig(listOfLayerEntryConfig[0].listOfLayerEntryConfig!, newLayerGroup).then((groupReturned) => {
-            if (groupReturned) {
-              if (layerGroup) layerGroup.getLayers().push(groupReturned);
-              resolve(groupReturned);
-            } else {
-              this.layerLoadError.push({
-                layer: Layer.getLayerPath(listOfLayerEntryConfig[0]),
-                consoleMessage: `Unable to create group layer ${Layer.getLayerPath(listOfLayerEntryConfig[0])} on map ${this.mapId}`,
-              });
-              resolve(null);
-            }
+          const groupReturned = await this.processListOfLayerEntryConfig(listOfLayerEntryConfig[0].listOfLayerEntryConfig!, newLayerGroup);
+          if (groupReturned) {
+            if (layerGroup) layerGroup.getLayers().push(groupReturned);
+            return groupReturned;
+          }
+          this.layerLoadError.push({
+            layer: Layer.getLayerPath(listOfLayerEntryConfig[0]),
+            consoleMessage: `Unable to create group layer ${Layer.getLayerPath(listOfLayerEntryConfig[0])} on map ${this.mapId}`,
           });
-        } else if ((listOfLayerEntryConfig[0] as TypeBaseLayerEntryConfig).layerStatus === 'error') resolve(null);
+          return null;
+        }
+        if ((listOfLayerEntryConfig[0] as TypeBaseLayerEntryConfig).layerStatus === 'error') return null;
+        if (
+          listOfLayerEntryConfig[0].entryType === 'vector' &&
+          (listOfLayerEntryConfig[0].source as TypeBaseSourceVectorInitialConfig)?.cluster?.enable
+        ) {
+          const unclusteredLayerConfig = cloneDeep(listOfLayerEntryConfig[0]) as TypeVectorLayerEntryConfig;
+          unclusteredLayerConfig.layerId = `${listOfLayerEntryConfig[0].layerId}-unclustered`;
+          unclusteredLayerConfig.source!.cluster!.enable = false;
+          const baseLayer = await this.processOneLayerEntry(unclusteredLayerConfig as TypeBaseLayerEntryConfig);
+          if (baseLayer) {
+            baseLayer!.setVisible(false);
+            api.maps[this.mapId].layer.registerLayerConfig(unclusteredLayerConfig);
+            this.registerToLayerSets(unclusteredLayerConfig as TypeBaseLayerEntryConfig);
+            if (!layerGroup) layerGroup = this.createLayerGroup(unclusteredLayerConfig.parentLayerConfig as TypeLayerEntryConfig);
+            layerGroup!.getLayers().push(baseLayer!);
+          }
+          (listOfLayerEntryConfig[0].source as TypeBaseSourceVectorInitialConfig)!.cluster!.settings =
+            unclusteredLayerConfig.source!.cluster!.settings;
+        }
+        const baseLayer = await this.processOneLayerEntry(listOfLayerEntryConfig[0] as TypeBaseLayerEntryConfig);
+        if (baseLayer) {
+          baseLayer.setVisible(listOfLayerEntryConfig[0].initialSettings?.visible !== 'no');
+          this.registerToLayerSets(listOfLayerEntryConfig[0] as TypeBaseLayerEntryConfig);
+          if (layerGroup) layerGroup!.getLayers().push(baseLayer!);
+          this.changeLayerStatus('processed', listOfLayerEntryConfig[0]);
+          return layerGroup || baseLayer;
+        }
+        this.layerLoadError.push({
+          layer: Layer.getLayerPath(listOfLayerEntryConfig[0]),
+          consoleMessage: `Unable to create layer ${Layer.getLayerPath(listOfLayerEntryConfig[0])} on map ${this.mapId}`,
+        });
+        this.changeLayerStatus('error', listOfLayerEntryConfig[0]);
+        return null;
+      }
+      if (!layerGroup && listOfLayerEntryConfig.length > 0) {
+        // All children of this level in the tree have the same parent, so we use the first element of the array to retrieve the parent node.
+        layerGroup = this.createLayerGroup(listOfLayerEntryConfig[0].parentLayerConfig as TypeLayerEntryConfig);
+      }
+      const promiseOfLayerCreated: Promise<BaseLayer | LayerGroup | null>[] = [];
+      listOfLayerEntryConfig.forEach((layerEntryConfig, i) => {
+        if (layerEntryIsGroupLayer(layerEntryConfig)) {
+          const newLayerGroup = this.createLayerGroup(listOfLayerEntryConfig[i]);
+          promiseOfLayerCreated.push(this.processListOfLayerEntryConfig(layerEntryConfig.listOfLayerEntryConfig!, newLayerGroup));
+        } else if ((listOfLayerEntryConfig[i] as TypeBaseLayerEntryConfig).layerStatus === 'error')
+          promiseOfLayerCreated.push(Promise.resolve(null));
         else {
-          if (
-            listOfLayerEntryConfig[0].entryType === 'vector' &&
-            (listOfLayerEntryConfig[0].source as TypeBaseSourceVectorInitialConfig)?.cluster?.enable
-          ) {
-            const unclusteredLayerConfig = cloneDeep(listOfLayerEntryConfig[0]) as TypeVectorLayerEntryConfig;
-            unclusteredLayerConfig.layerId = `${listOfLayerEntryConfig[0].layerId}-unclustered`;
+          if (layerEntryConfig.entryType === 'vector' && (layerEntryConfig.source as TypeBaseSourceVectorInitialConfig)?.cluster?.enable) {
+            const unclusteredLayerConfig = cloneDeep(layerEntryConfig) as TypeVectorLayerEntryConfig;
+            unclusteredLayerConfig.layerId = `${layerEntryConfig.layerId}-unclustered`;
             unclusteredLayerConfig.source!.cluster!.enable = false;
-            this.processOneLayerEntry(unclusteredLayerConfig as TypeBaseLayerEntryConfig).then((baseLayer) => {
-              if (baseLayer) {
-                baseLayer.setVisible(false);
-                api.maps[this.mapId].layer.registerLayerConfig(unclusteredLayerConfig);
-                this.registerToLayerSets(unclusteredLayerConfig as TypeBaseLayerEntryConfig);
-                if (!layerGroup) layerGroup = this.createLayerGroup(unclusteredLayerConfig.parentLayerConfig as TypeLayerEntryConfig);
-                layerGroup.getLayers().push(baseLayer);
-              }
-            });
-            (listOfLayerEntryConfig[0].source as TypeBaseSourceVectorInitialConfig)!.cluster!.settings =
+            api.maps[this.mapId].layer.registerLayerConfig(unclusteredLayerConfig);
+            promiseOfLayerCreated.push(this.processOneLayerEntry(unclusteredLayerConfig as TypeBaseLayerEntryConfig));
+            (layerEntryConfig.source as TypeBaseSourceVectorInitialConfig)!.cluster!.settings =
               unclusteredLayerConfig.source!.cluster!.settings;
           }
-          this.processOneLayerEntry(listOfLayerEntryConfig[0] as TypeBaseLayerEntryConfig).then((baseLayer) => {
-            if (baseLayer) {
-              baseLayer.setVisible(listOfLayerEntryConfig[0].initialSettings?.visible !== 'no');
-              this.registerToLayerSets(listOfLayerEntryConfig[0] as TypeBaseLayerEntryConfig);
-              if (layerGroup) layerGroup.getLayers().push(baseLayer);
-              this.changeLayerStatus('processed', listOfLayerEntryConfig[0]);
-              resolve(layerGroup || baseLayer);
-            } else {
-              this.layerLoadError.push({
-                layer: Layer.getLayerPath(listOfLayerEntryConfig[0]),
-                consoleMessage: `Unable to create layer ${Layer.getLayerPath(listOfLayerEntryConfig[0])} on map ${this.mapId}`,
-              });
-              this.changeLayerStatus('error', listOfLayerEntryConfig[0]);
-              resolve(null);
-            }
-          });
-        }
-      } else {
-        if (!layerGroup && listOfLayerEntryConfig.length > 0) {
-          // All children of this level in the tree have the same parent, so we use the first element of the array to retrieve the parent node.
-          layerGroup = this.createLayerGroup(listOfLayerEntryConfig[0].parentLayerConfig as TypeLayerEntryConfig);
+          promiseOfLayerCreated.push(this.processOneLayerEntry(layerEntryConfig as TypeBaseLayerEntryConfig));
         }
-        const promiseOfLayerCreated: Promise<BaseLayer | LayerGroup | null>[] = [];
-        listOfLayerEntryConfig.forEach((layerEntryConfig, i) => {
-          if (layerEntryIsGroupLayer(layerEntryConfig)) {
-            const newLayerGroup = this.createLayerGroup(listOfLayerEntryConfig[i]);
-            promiseOfLayerCreated.push(this.processListOfLayerEntryConfig(layerEntryConfig.listOfLayerEntryConfig!, newLayerGroup));
-          } else if ((listOfLayerEntryConfig[i] as TypeBaseLayerEntryConfig).layerStatus === 'error')
-            promiseOfLayerCreated.push(Promise.resolve(null));
-          else {
-            if (
-              layerEntryConfig.entryType === 'vector' &&
-              (layerEntryConfig.source as TypeBaseSourceVectorInitialConfig)?.cluster?.enable
-            ) {
-              const unclusteredLayerConfig = cloneDeep(layerEntryConfig) as TypeVectorLayerEntryConfig;
-              unclusteredLayerConfig.layerId = `${layerEntryConfig.layerId}-unclustered`;
-              unclusteredLayerConfig.source!.cluster!.enable = false;
-              api.maps[this.mapId].layer.registerLayerConfig(unclusteredLayerConfig);
-              promiseOfLayerCreated.push(this.processOneLayerEntry(unclusteredLayerConfig as TypeBaseLayerEntryConfig));
-              (layerEntryConfig.source as TypeBaseSourceVectorInitialConfig)!.cluster!.settings =
-                unclusteredLayerConfig.source!.cluster!.settings;
+      });
+      const listOfLayerCreated = await Promise.all(promiseOfLayerCreated);
+      listOfLayerCreated.forEach((baseLayer, i) => {
+        if (baseLayer) {
+          const layerEntryConfig = baseLayer?.get('layerEntryConfig') as TypeBaseLayerEntryConfig;
+          if (layerEntryConfig) {
+            if (layerEntryConfig.layerId.endsWith('-unclustered')) {
+              this.registerToLayerSets(layerEntryConfig);
+              baseLayer.setVisible(false);
+            } else
+              baseLayer.setVisible(
+                layerEntryConfig.initialSettings?.visible === 'yes' ||
+                  layerEntryConfig.initialSettings?.visible === 'always' ||
+                  layerEntryConfig.initialSettings?.visible === undefined
+              );
+
+            if (!layerEntryIsGroupLayer(listOfLayerEntryConfig[i])) {
+              this.registerToLayerSets(baseLayer.get('layerEntryConfig') as TypeBaseLayerEntryConfig);
+              this.changeLayerStatus('processed', listOfLayerEntryConfig[i]);
             }
-            promiseOfLayerCreated.push(this.processOneLayerEntry(layerEntryConfig as TypeBaseLayerEntryConfig));
+            layerGroup!.getLayers().push(baseLayer);
           }
-        });
-        Promise.all(promiseOfLayerCreated)
-          .then((listOfLayerCreated) => {
-            listOfLayerCreated.forEach((baseLayer, i) => {
-              if (baseLayer) {
-                const layerEntryConfig = baseLayer?.get('layerEntryConfig') as TypeBaseLayerEntryConfig;
-                if (layerEntryConfig) {
-                  if (layerEntryConfig.layerId.endsWith('-unclustered')) {
-                    this.registerToLayerSets(layerEntryConfig);
-                    baseLayer.setVisible(false);
-                  } else
-                    baseLayer.setVisible(
-                      layerEntryConfig.initialSettings?.visible === 'yes' ||
-                        layerEntryConfig.initialSettings?.visible === 'always' ||
-                        layerEntryConfig.initialSettings?.visible === undefined
-                    );
-
-                  if (!layerEntryIsGroupLayer(listOfLayerEntryConfig[i])) {
-                    this.registerToLayerSets(baseLayer.get('layerEntryConfig') as TypeBaseLayerEntryConfig);
-                    this.changeLayerStatus('processed', listOfLayerEntryConfig[i]);
-                  }
-                  layerGroup!.getLayers().push(baseLayer);
-                }
-              } else {
-                this.layerLoadError.push({
-                  layer: Layer.getLayerPath(listOfLayerEntryConfig[i]),
-                  consoleMessage: `Unable to create ${
-                    layerEntryIsGroupLayer(listOfLayerEntryConfig[i]) ? 'group' : ''
-                  } layer ${Layer.getLayerPath(listOfLayerEntryConfig[i])} on map ${this.mapId}`,
-                });
-                this.changeLayerStatus('error', listOfLayerEntryConfig[i]);
-              }
-            });
-            resolve(layerGroup!);
-          })
-          .catch((reason) => {
-            // eslint-disable-next-line no-console
-            console.log(reason);
-            resolve(null);
+        } else {
+          this.layerLoadError.push({
+            layer: Layer.getLayerPath(listOfLayerEntryConfig[i]),
+            consoleMessage: `Unable to create ${
+              layerEntryIsGroupLayer(listOfLayerEntryConfig[i]) ? 'group' : ''
+            } layer ${Layer.getLayerPath(listOfLayerEntryConfig[i])} on map ${this.mapId}`,
           });
-      }
-    });
-    return promisedListOfLayerEntryProcessed;
+          this.changeLayerStatus('error', listOfLayerEntryConfig[i]);
+        }
+      });
+
+      return layerGroup!;
+    } catch (error) {
+      console.log(error);
+      return null;
+    }
   }
 
   /** ***************************************************************************************************************************
@@ -779,43 +749,44 @@ export abstract class AbstractGeoViewLayer {
    *
    * @returns {Promise<TypeFeatureInfoResult>} The feature info table.
    */
-  getFeatureInfo(
+  async getFeatureInfo(
     queryType: TypeQueryType,
     layerPathOrConfig: string | TypeLayerEntryConfig,
     location: TypeLocation = null
   ): Promise<TypeArrayOfFeatureInfoEntries> {
-    const queryResult = new Promise<TypeArrayOfFeatureInfoEntries>((resolve) => {
+    try {
       const layerConfig = (
         typeof layerPathOrConfig === 'string' ? this.getLayerConfig(layerPathOrConfig) : layerPathOrConfig
       ) as TypeLayerEntryConfig | null;
-      if (!layerConfig || !layerConfig.source?.featureInfo?.queryable) resolve([]);
+      if (!layerConfig || !layerConfig.source?.featureInfo?.queryable) return [];
 
       switch (queryType) {
         case 'all':
-          this.getAllFeatureInfo(layerConfig!).then((featureInfoResult) => resolve(featureInfoResult));
+          return await this.getAllFeatureInfo(layerConfig!);
           break;
         case 'at_pixel':
-          this.getFeatureInfoAtPixel(location as Pixel, layerConfig!).then((featureInfoResult) => resolve(featureInfoResult));
+          return await this.getFeatureInfoAtPixel(location as Pixel, layerConfig!);
           break;
         case 'at_coordinate':
-          this.getFeatureInfoAtCoordinate(location as Coordinate, layerConfig!).then((featureInfoResult) => resolve(featureInfoResult));
+          return await this.getFeatureInfoAtCoordinate(location as Coordinate, layerConfig!);
           break;
         case 'at_long_lat':
-          this.getFeatureInfoAtLongLat(location as Coordinate, layerConfig!).then((featureInfoResult) => resolve(featureInfoResult));
+          return await this.getFeatureInfoAtLongLat(location as Coordinate, layerConfig!);
           break;
         case 'using_a_bounding_box':
-          this.getFeatureInfoUsingBBox(location as Coordinate[], layerConfig!).then((featureInfoResult) => resolve(featureInfoResult));
+          return await this.getFeatureInfoUsingBBox(location as Coordinate[], layerConfig!);
           break;
         case 'using_a_polygon':
-          this.getFeatureInfoUsingPolygon(location as Coordinate[], layerConfig!).then((featureInfoResult) => resolve(featureInfoResult));
+          return await this.getFeatureInfoUsingPolygon(location as Coordinate[], layerConfig!);
           break;
         default:
-          // eslint-disable-next-line no-console
           console.log(`Queries using ${queryType} are invalid.`);
-          resolve([]);
+          return [];
       }
-    });
-    return queryResult;
+    } catch (error) {
+      console.log(error);
+      return [];
+    }
   }
 
   /** ***************************************************************************************************************************
@@ -826,12 +797,10 @@ export abstract class AbstractGeoViewLayer {
    *
    * @returns {Promise<TypeArrayOfFeatureInfoEntries>} The feature info table.
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected getAllFeatureInfo(layerConfig: TypeLayerEntryConfig): Promise<TypeArrayOfFeatureInfoEntries> {
-    const promisedQueryResult = new Promise<TypeArrayOfFeatureInfoEntries>((resolve) => {
-      resolve([]);
-    });
-    return promisedQueryResult;
+
+  protected async getAllFeatureInfo(layerConfig: TypeLayerEntryConfig): Promise<TypeArrayOfFeatureInfoEntries> {
+    console.log('getAllFeatureInfo is not implemented!');
+    return [];
   }
 
   /** ***************************************************************************************************************************
@@ -843,12 +812,10 @@ export abstract class AbstractGeoViewLayer {
    *
    * @returns {Promise<TypeArrayOfFeatureInfoEntries>} The feature info table.
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected getFeatureInfoAtPixel(location: Pixel, layerConfig: TypeLayerEntryConfig): Promise<TypeArrayOfFeatureInfoEntries> {
-    const promisedQueryResult = new Promise<TypeArrayOfFeatureInfoEntries>((resolve) => {
-      resolve([]);
-    });
-    return promisedQueryResult;
+
+  protected async getFeatureInfoAtPixel(location: Pixel, layerConfig: TypeLayerEntryConfig): Promise<TypeArrayOfFeatureInfoEntries> {
+    console.log('getFeatureInfoAtPixel is not implemented!');
+    return [];
   }
 
   /** ***************************************************************************************************************************
@@ -860,12 +827,13 @@ export abstract class AbstractGeoViewLayer {
    *
    * @returns {Promise<TypeArrayOfFeatureInfoEntries>} The feature info table.
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected getFeatureInfoAtCoordinate(location: Coordinate, layerConfig: TypeLayerEntryConfig): Promise<TypeArrayOfFeatureInfoEntries> {
-    const promisedQueryResult = new Promise<TypeArrayOfFeatureInfoEntries>((resolve) => {
-      resolve([]);
-    });
-    return promisedQueryResult;
+
+  protected async getFeatureInfoAtCoordinate(
+    location: Coordinate,
+    layerConfig: TypeLayerEntryConfig
+  ): Promise<TypeArrayOfFeatureInfoEntries> {
+    console.log('getFeatureInfoAtCoordinate is not implemented!');
+    return [];
   }
 
   /** ***************************************************************************************************************************
@@ -877,12 +845,10 @@ export abstract class AbstractGeoViewLayer {
    *
    * @returns {Promise<TypeArrayOfFeatureInfoEntries>} The feature info table.
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected getFeatureInfoAtLongLat(location: Coordinate, layerConfig: TypeLayerEntryConfig): Promise<TypeArrayOfFeatureInfoEntries> {
-    const promisedQueryResult = new Promise<TypeArrayOfFeatureInfoEntries>((resolve) => {
-      resolve([]);
-    });
-    return promisedQueryResult;
+
+  protected async getFeatureInfoAtLongLat(location: Coordinate, layerConfig: TypeLayerEntryConfig): Promise<TypeArrayOfFeatureInfoEntries> {
+    console.log('getFeatureInfoAtLongLat is not implemented!');
+    return [];
   }
 
   /** ***************************************************************************************************************************
@@ -894,12 +860,13 @@ export abstract class AbstractGeoViewLayer {
    *
    * @returns {Promise<TypeArrayOfFeatureInfoEntries>} The feature info table.
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected getFeatureInfoUsingBBox(location: Coordinate[], layerConfig: TypeLayerEntryConfig): Promise<TypeArrayOfFeatureInfoEntries> {
-    const promisedQueryResult = new Promise<TypeArrayOfFeatureInfoEntries>((resolve) => {
-      resolve([]);
-    });
-    return promisedQueryResult;
+
+  protected async getFeatureInfoUsingBBox(
+    location: Coordinate[],
+    layerConfig: TypeLayerEntryConfig
+  ): Promise<TypeArrayOfFeatureInfoEntries> {
+    console.log('getFeatureInfoUsingBBox is not implemented!');
+    return [];
   }
 
   /** ***************************************************************************************************************************
@@ -911,12 +878,13 @@ export abstract class AbstractGeoViewLayer {
    *
    * @returns {Promise<TypeArrayOfFeatureInfoEntries>} The feature info table.
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  protected getFeatureInfoUsingPolygon(location: Coordinate[], layerConfig: TypeLayerEntryConfig): Promise<TypeArrayOfFeatureInfoEntries> {
-    const promisedQueryResult = new Promise<TypeArrayOfFeatureInfoEntries>((resolve) => {
-      resolve([]);
-    });
-    return promisedQueryResult;
+
+  protected async getFeatureInfoUsingPolygon(
+    location: Coordinate[],
+    layerConfig: TypeLayerEntryConfig
+  ): Promise<TypeArrayOfFeatureInfoEntries> {
+    console.log('getFeatureInfoUsingPolygon is not implemented!');
+    return [];
   }
 
   /** ***************************************************************************************************************************
@@ -1100,7 +1068,7 @@ export abstract class AbstractGeoViewLayer {
    *
    * @returns {null | codedValueType | rangeDomainType} The domain of the field.
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
   protected getFieldDomain(fieldName: string, layerConfig: TypeLayerEntryConfig): null | codedValueType | rangeDomainType {
     return null;
   }
@@ -1113,7 +1081,7 @@ export abstract class AbstractGeoViewLayer {
    *
    * @returns {'string' | 'date' | 'number'} The type of the field.
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
   protected getFieldType(fieldName: string, layerConfig: TypeLayerEntryConfig): 'string' | 'date' | 'number' {
     return 'string';
   }
@@ -1293,7 +1261,6 @@ export abstract class AbstractGeoViewLayer {
    *
    * @returns {string | number | Date} The formatted value of the field.
    */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   protected getFieldValue(feature: Feature<Geometry>, fieldName: string, fieldType: 'number' | 'string' | 'date'): string | number | Date {
     const fieldValue = feature.get(fieldName);
     let returnValue: string | number | Date;
@@ -1322,90 +1289,90 @@ export abstract class AbstractGeoViewLayer {
    *
    * @returns {TypeArrayOfFeatureInfoEntries} The Array of feature information.
    */
-  protected formatFeatureInfoResult(
+  protected async formatFeatureInfoResult(
     features: Feature<Geometry>[],
     layerEntryConfig: TypeOgcWmsLayerEntryConfig | TypeEsriDynamicLayerEntryConfig | TypeVectorLayerEntryConfig
   ): Promise<TypeArrayOfFeatureInfoEntries> {
-    const promisedArrayOfFeatureInfo = new Promise<TypeArrayOfFeatureInfoEntries>((resolve) => {
-      if (!features.length) resolve([]);
-      else {
-        const featureInfo = layerEntryConfig?.source?.featureInfo;
-        const fieldTypes = featureInfo?.fieldTypes?.split(',') as ('string' | 'number' | 'date')[];
-        const outfields = getLocalizedValue(featureInfo?.outfields, this.mapId)?.split(',');
-        const aliasFields = getLocalizedValue(featureInfo?.aliasFields, this.mapId)?.split(',');
-        const queryResult: TypeArrayOfFeatureInfoEntries = [];
-        let featureKeyCounter = 0;
-        let fieldKeyCounter = 0;
-        const promisedAllCanvasFound: Promise<{ feature: Feature<Geometry>; canvas: HTMLCanvasElement | undefined }>[] = [];
-        features.forEach((featureNeedingItsCanvas) => {
-          promisedAllCanvasFound.push(
-            new Promise<{ feature: Feature<Geometry>; canvas: HTMLCanvasElement | undefined }>((resolveCanvas) => {
-              api.maps[this.mapId].geoviewRenderer
-                .getFeatureCanvas(featureNeedingItsCanvas, layerEntryConfig as TypeVectorLayerEntryConfig)
-                .then((canvas) => {
-                  resolveCanvas({ feature: featureNeedingItsCanvas, canvas });
-                });
-            })
-          );
-        });
-        Promise.all(promisedAllCanvasFound).then((arrayOfFeatureInfo) => {
-          arrayOfFeatureInfo.forEach(({ canvas, feature }) => {
-            if (canvas) {
-              const extent =
-                layerEntryIsVector(layerEntryConfig) && layerEntryConfig.source?.cluster?.enable
-                  ? (feature.get('features') as Array<Feature<Geometry>>).reduce((resultingExtent, featureToProcess) => {
-                      const newExtent = featureToProcess.getGeometry()!.getExtent();
-                      return [
-                        Math.min(resultingExtent[0], newExtent[0]),
-                        Math.min(resultingExtent[1], newExtent[1]),
-                        Math.max(resultingExtent[2], newExtent[2]),
-                        Math.max(resultingExtent[3], newExtent[3]),
-                      ];
-                    }, feature.getGeometry()!.getExtent())
-                  : feature.getGeometry()!.getExtent();
-
-              const featureInfoEntry: TypeFeatureInfoEntry = {
-                // feature key for building the data-grid
-                featureKey: featureKeyCounter++,
-                geoviewLayerType: this.type,
-                extent,
-                geometry: feature,
-                featureIcon: canvas,
-                fieldInfo: {},
-                nameField: getLocalizedValue(layerEntryConfig?.source?.featureInfo?.nameField, this.mapId) || null,
-              };
-
-              const featureFields = feature.getKeys();
-              featureFields.forEach((fieldName) => {
-                if (fieldName !== 'geometry') {
-                  if (outfields?.includes(fieldName)) {
-                    const fieldIndex = outfields.indexOf(fieldName);
-                    featureInfoEntry.fieldInfo[fieldName] = {
-                      fieldKey: fieldKeyCounter++,
-                      value: this.getFieldValue(feature, fieldName, fieldTypes![fieldIndex]),
-                      dataType: fieldTypes![fieldIndex] as 'string' | 'date' | 'number',
-                      alias: aliasFields![fieldIndex],
-                      domain: this.getFieldDomain(fieldName, layerEntryConfig!),
-                    };
-                  } else if (!outfields) {
-                    featureInfoEntry.fieldInfo[fieldName] = {
-                      fieldKey: fieldKeyCounter++,
-                      value: this.getFieldValue(feature, fieldName, this.getFieldType(fieldName, layerEntryConfig!)),
-                      dataType: this.getFieldType(fieldName, layerEntryConfig!),
-                      alias: fieldName,
-                      domain: this.getFieldDomain(fieldName, layerEntryConfig!),
-                    };
-                  }
-                }
+    try {
+      if (!features.length) return [];
+
+      const featureInfo = layerEntryConfig?.source?.featureInfo;
+      const fieldTypes = featureInfo?.fieldTypes?.split(',') as ('string' | 'number' | 'date')[];
+      const outfields = getLocalizedValue(featureInfo?.outfields, this.mapId)?.split(',');
+      const aliasFields = getLocalizedValue(featureInfo?.aliasFields, this.mapId)?.split(',');
+      const queryResult: TypeArrayOfFeatureInfoEntries = [];
+      let featureKeyCounter = 0;
+      let fieldKeyCounter = 0;
+      const promisedAllCanvasFound: Promise<{ feature: Feature<Geometry>; canvas: HTMLCanvasElement | undefined }>[] = [];
+      features.forEach((featureNeedingItsCanvas) => {
+        promisedAllCanvasFound.push(
+          new Promise<{ feature: Feature<Geometry>; canvas: HTMLCanvasElement | undefined }>((resolveCanvas) => {
+            api.maps[this.mapId].geoviewRenderer
+              .getFeatureCanvas(featureNeedingItsCanvas, layerEntryConfig as TypeVectorLayerEntryConfig)
+              .then((canvas) => {
+                resolveCanvas({ feature: featureNeedingItsCanvas, canvas });
               });
-              queryResult.push(featureInfoEntry);
+          })
+        );
+      });
+      const arrayOfFeatureInfo = await Promise.all(promisedAllCanvasFound);
+      arrayOfFeatureInfo.forEach(({ canvas, feature }) => {
+        if (canvas) {
+          const extent =
+            layerEntryIsVector(layerEntryConfig) && layerEntryConfig.source?.cluster?.enable
+              ? (feature.get('features') as Array<Feature<Geometry>>).reduce((resultingExtent, featureToProcess) => {
+                  const newExtent = featureToProcess.getGeometry()!.getExtent();
+                  return [
+                    Math.min(resultingExtent[0], newExtent[0]),
+                    Math.min(resultingExtent[1], newExtent[1]),
+                    Math.max(resultingExtent[2], newExtent[2]),
+                    Math.max(resultingExtent[3], newExtent[3]),
+                  ];
+                }, feature.getGeometry()!.getExtent())
+              : feature.getGeometry()!.getExtent();
+
+          const featureInfoEntry: TypeFeatureInfoEntry = {
+            // feature key for building the data-grid
+            featureKey: featureKeyCounter++,
+            geoviewLayerType: this.type,
+            extent,
+            geometry: feature,
+            featureIcon: canvas,
+            fieldInfo: {},
+            nameField: getLocalizedValue(layerEntryConfig?.source?.featureInfo?.nameField, this.mapId) || null,
+          };
+
+          const featureFields = feature.getKeys();
+          featureFields.forEach((fieldName) => {
+            if (fieldName !== 'geometry') {
+              if (outfields?.includes(fieldName)) {
+                const fieldIndex = outfields.indexOf(fieldName);
+                featureInfoEntry.fieldInfo[fieldName] = {
+                  fieldKey: fieldKeyCounter++,
+                  value: this.getFieldValue(feature, fieldName, fieldTypes![fieldIndex]),
+                  dataType: fieldTypes![fieldIndex] as 'string' | 'date' | 'number',
+                  alias: aliasFields![fieldIndex],
+                  domain: this.getFieldDomain(fieldName, layerEntryConfig!),
+                };
+              } else if (!outfields) {
+                featureInfoEntry.fieldInfo[fieldName] = {
+                  fieldKey: fieldKeyCounter++,
+                  value: this.getFieldValue(feature, fieldName, this.getFieldType(fieldName, layerEntryConfig!)),
+                  dataType: this.getFieldType(fieldName, layerEntryConfig!),
+                  alias: fieldName,
+                  domain: this.getFieldDomain(fieldName, layerEntryConfig!),
+                };
+              }
             }
           });
-          resolve(queryResult);
-        });
-      }
-    });
-    return promisedArrayOfFeatureInfo;
+          queryResult.push(featureInfoEntry);
+        }
+      });
+      return queryResult;
+    } catch (error) {
+      console.log(error);
+    }
+    return [];
   }
 
   /** ***************************************************************************************************************************
diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/raster/abstract-geoview-raster.ts b/packages/geoview-core/src/geo/layer/geoview-layers/raster/abstract-geoview-raster.ts
index e9109c77add..4a26bace751 100644
--- a/packages/geoview-core/src/geo/layer/geoview-layers/raster/abstract-geoview-raster.ts
+++ b/packages/geoview-core/src/geo/layer/geoview-layers/raster/abstract-geoview-raster.ts
@@ -2,6 +2,7 @@
 import BaseLayer from 'ol/layer/Base';
 import Feature from 'ol/Feature';
 import { Geometry } from 'ol/geom';
+import LayerGroup from 'ol/layer/Group';
 
 import { AbstractGeoViewLayer } from '../abstract-geoview-layers';
 import { Layer, LayerSetPayload, TypeLayerEntryConfig, api } from '@/app';
@@ -11,7 +12,9 @@ import { Layer, LayerSetPayload, TypeLayerEntryConfig, api } from '@/app';
  */
 
 // Base type used to keep the layer's hierarchical structure. It is similar to ol/layer/Base~BaseLayer.
-export type TypeBaseRasterLayer = BaseLayer; // TypeRasterLayerGroup | TypeRasterLayer;
+export type TypeRasterLayerGroup = LayerGroup;
+export type TypeRasterLayer = BaseLayer;
+export type TypeBaseRasterLayer = BaseLayer | TypeRasterLayerGroup | TypeRasterLayer;
 
 // ******************************************************************************************************************************
 // ******************************************************************************************************************************
diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/raster/wms.ts b/packages/geoview-core/src/geo/layer/geoview-layers/raster/wms.ts
index d269efa2d12..68eb756f822 100644
--- a/packages/geoview-core/src/geo/layer/geoview-layers/raster/wms.ts
+++ b/packages/geoview-core/src/geo/layer/geoview-layers/raster/wms.ts
@@ -841,7 +841,7 @@ export class WMS extends AbstractGeoViewRaster {
    *
    * @returns {Promise<TypeWmsLegendStylel>} The legend of the style.
    */
-  private async getStyleLegend(layerConfig: TypeOgcWmsLayerEntryConfig, position: number): Promise<TypeWmsLegendStyle> {
+  private getStyleLegend(layerConfig: TypeOgcWmsLayerEntryConfig, position: number): Promise<TypeWmsLegendStyle> {
     const promisedStyleLegend = new Promise<TypeWmsLegendStyle>((resolve) => {
       const chosenStyle: string | undefined = this.WMSStyles[position];
       let styleLegend: TypeWmsLegendStyle;
@@ -915,7 +915,7 @@ export class WMS extends AbstractGeoViewRaster {
           };
           resolve(legend);
         } else {
-          api.maps[this.mapId].geoviewRenderer.loadImage(legendImage as string).then(async (image) => {
+          api.maps[this.mapId].geoviewRenderer.loadImage(legendImage as string).then((image) => {
             if (image) {
               const drawingCanvas = document.createElement('canvas');
               drawingCanvas.width = image.width;
diff --git a/packages/geoview-core/src/geo/layer/layer.ts b/packages/geoview-core/src/geo/layer/layer.ts
index 9037277fa2e..3c218b38e06 100644
--- a/packages/geoview-core/src/geo/layer/layer.ts
+++ b/packages/geoview-core/src/geo/layer/layer.ts
@@ -9,7 +9,7 @@ import { api } from '@/app';
 import { EVENT_NAMES } from '@/api/events/event-types';
 
 import { Config } from '@/core/utils/config/config';
-import { generateId, showError, replaceParams, whenThisThenAsync } from '@/core/utils/utilities';
+import { generateId, showError, replaceParams, whenThisThen } from '@/core/utils/utilities';
 import {
   layerConfigPayload,
   payloadIsALayerConfig,
@@ -429,19 +429,22 @@ export class Layer {
    * Search asynchronously for a layer using it's id and return the layer data.
    * If the layer we're searching for has to be loaded, set mustBeLoaded to true when awaiting on this method.
    * This function waits the timeout period before abandonning (or uses the default timeout when not provided).
+   * Note this function uses 'Async' suffix only to differentiate it from 'getGeoviewLayerById'.
    *
-   * @param {string} id the layer id to look for
+   * @param {string} layerID the layer id to look for
    * @param {string} mustBeLoaded indicate if the layer we're searching for must be found only once loaded
+   * @param {string} checkFrequency optionally indicate the frequency at which to check for the condition on the layer
+   * @param {string} timeout optionally indicate the timeout after which time to abandon the promise
    * @returns the found layer data object
    */
-  getGeoviewLayerByIdAsync = async (
+  getGeoviewLayerByIdAsync = (
     layerID: string,
     mustBeLoaded: boolean,
     checkFrequency?: number,
     timeout?: number
   ): Promise<AbstractGeoViewLayer | null> => {
     // Get the layer
-    return whenThisThenAsync<AbstractGeoViewLayer | null>(
+    return whenThisThen<AbstractGeoViewLayer | null>(
       () => {
         // Redirects
         const lyr = this.getGeoviewLayerById(layerID);
@@ -483,6 +486,8 @@ export class Layer {
    * @param {AbstractGeoViewLayer} geoviewLayer layer to set Z index for
    */
   setLayerZIndices = (geoviewLayer: AbstractGeoViewLayer) => {
+    // if olLayers is null, the layer is in error and we return.
+    if (!geoviewLayer.olLayers) return;
     const zIndex =
       this.layerOrder.indexOf(geoviewLayer.geoviewLayerId) !== -1 ? this.layerOrder.indexOf(geoviewLayer.geoviewLayerId) * 100 : 0;
     geoviewLayer.olLayers!.setZIndex(zIndex);
diff --git a/packages/geoview-core/src/geo/map/map-viewer.ts b/packages/geoview-core/src/geo/map/map-viewer.ts
index 69a9e8c6ed9..addd6299976 100644
--- a/packages/geoview-core/src/geo/map/map-viewer.ts
+++ b/packages/geoview-core/src/geo/map/map-viewer.ts
@@ -22,11 +22,13 @@ import { NavbarButtons } from '@/core/components/nav-bar/nav-bar-buttons';
 import { FooterTabsApi } from '@/core/components/footer-tabs/footer-tabs-api';
 import { LegendApi } from '@/core/components/legend/legend-api';
 import { Legend2Api } from '@/core/components/legend-2/legend-api';
+import { LayersApi } from '@/core/components/layers/layers-api';
 import { DetailsApi } from '@/core/components/details/details-api';
 import { DataTableApi } from '@/core/components/data-table/data-table-api';
 import { GeoviewRenderer } from '@/geo/renderer/geoview-renderer';
 import { Select } from '@/geo/interaction/select';
 import { Draw } from '@/geo/interaction/draw';
+import { Extent as ExtentInteraction } from '@/geo/interaction/extent';
 import { Modify } from '@/geo/interaction/modify';
 import { Snap } from '@/geo/interaction/snap';
 import { Translate } from '@/geo/interaction/translate';
@@ -84,6 +86,9 @@ export class MapViewer {
 
   legend2!: Legend2Api;
 
+  // used to access the layers in the footer
+  layers!: LayersApi;
+
   // used to access the details in footer
   details!: DetailsApi;
 
@@ -148,6 +153,7 @@ export class MapViewer {
     this.footerTabs = new FooterTabsApi(this.mapId);
     this.legend = new LegendApi(this.mapId);
     this.legend2 = new Legend2Api(this.mapId);
+    this.layers = new LayersApi(this.mapId);
     this.details = new DetailsApi(this.mapId);
     this.dataTable = new DataTableApi(this.mapId);
 
@@ -564,6 +570,19 @@ export class MapViewer {
     return select;
   }
 
+  /**
+   * Initializes extent interactions
+   */
+  initExtentInteractions() {
+    // Create selecting capabilities
+    const extent = new ExtentInteraction({
+      mapViewer: this,
+      pixelTolerance: 5,
+    });
+    extent.startInteraction();
+    return extent;
+  }
+
   /**
    * Initializes translation interactions
    */
diff --git a/packages/geoview-core/src/geo/utils/utilities.ts b/packages/geoview-core/src/geo/utils/utilities.ts
index a6d5c35b1f2..501646015a0 100644
--- a/packages/geoview-core/src/geo/utils/utilities.ts
+++ b/packages/geoview-core/src/geo/utils/utilities.ts
@@ -15,8 +15,6 @@ import { Cast, TypeJsonObject } from '@/core/types/global-types';
 import { TypeFeatureStyle } from '@/geo/layer/geometry/geometry-types';
 import { xmlToJson } from '@/core/utils/utilities';
 
-import { api } from '@/app';
-import { LayerSetPayload } from '@/api/events/payloads';
 import { TypeLayerEntryConfig, TypeListOfLayerEntryConfig, layerEntryIsGroupLayer } from '@/geo/map/map-schema-types';
 import { AbstractGeoViewLayer } from '@/geo/layer/geoview-layers/abstract-geoview-layers';
 import { Layer } from '@/geo/layer/layer';
@@ -46,7 +44,7 @@ export class GeoUtilities {
         this.setAllLayerStatusToError(geoviewLayerInstance, layerEntryConfig.listOfLayerEntryConfig, errorMessage);
       else {
         const layerPath = Layer.getLayerPath(layerEntryConfig);
-        api.event.emit(LayerSetPayload.createLayerSetChangeLayerStatusPayload(geoviewLayerInstance.mapId, layerPath, 'error'));
+        geoviewLayerInstance.changeLayerStatus('error', layerEntryConfig);
         geoviewLayerInstance.layerLoadError.push({
           layer: layerPath,
           consoleMessage: `${errorMessage} for layer ${layerPath} of map ${geoviewLayerInstance.mapId}`,
diff --git a/packages/geoview-core/src/ui/button/button-style.ts b/packages/geoview-core/src/ui/button/button-style.ts
new file mode 100644
index 00000000000..8ec022c4988
--- /dev/null
+++ b/packages/geoview-core/src/ui/button/button-style.ts
@@ -0,0 +1,36 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  textIconContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+  },
+  icon: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    color: theme.palette.primary.dark,
+  },
+  text: {
+    width: '100%',
+    textAlign: 'center',
+    textTransform: 'none',
+    marginLeft: 20,
+    display: 'flex',
+    justifyContent: 'center',
+    '& $buttonClass': {
+      justifyContent: 'flex-start',
+    },
+  },
+  buttonClass: {
+    display: 'flex',
+    fontSize: theme.typography.fontSize,
+    paddingLeft: '16px',
+    paddingRight: '16px',
+    justifyContent: 'center',
+    width: '100%',
+    height: 50,
+  },
+});
diff --git a/packages/geoview-core/src/ui/button/button.tsx b/packages/geoview-core/src/ui/button/button.tsx
index 81f9300757a..fe1caf1ad7b 100644
--- a/packages/geoview-core/src/ui/button/button.tsx
+++ b/packages/geoview-core/src/ui/button/button.tsx
@@ -1,51 +1,11 @@
-import { useRef, useState, useEffect, useCallback, ReactNode } from 'react';
-
 import { useTranslation } from 'react-i18next';
 
-import makeStyles from '@mui/styles/makeStyles';
 import { useTheme } from '@mui/styles';
 
 import { Button as MaterialButton, Fade, Tooltip } from '@mui/material';
 
-import { Cast } from '@/core/types/global-types';
-
-import { HtmlToReact } from '@/core/containers/html-to-react';
 import { TypeButtonProps } from '../panel/panel-types';
-
-const useStyles = makeStyles((theme) => ({
-  textIconContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    width: '100%',
-  },
-  icon: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    color: theme.palette.primary.dark,
-  },
-  text: {
-    width: '100%',
-    textAlign: 'center',
-    textTransform: 'none',
-    marginLeft: 20,
-    display: 'flex',
-    justifyContent: 'center',
-    '& $buttonClass': {
-      justifyContent: 'flex-start',
-    },
-  },
-  buttonClass: {
-    display: 'flex',
-    fontSize: theme.typography.fontSize,
-    paddingLeft: 18,
-    paddingRight: 20,
-    justifyContent: 'center',
-    width: '100%',
-    height: 50,
-  },
-}));
+import { getSxClasses } from './button-style';
 
 /**
  * Create a customized Material UI button
@@ -54,149 +14,34 @@ const useStyles = makeStyles((theme) => ({
  * @returns {JSX.Element} the new UI element
  */
 export function Button(props: TypeButtonProps): JSX.Element {
-  const [content, setContent] = useState<ReactNode>();
-
-  const {
-    sx,
-    variant,
-    tooltip,
-    tooltipPlacement,
-    onClick,
-    icon,
-    className,
-    iconClassName,
-    textClassName,
-    style,
-    children,
-    type,
-    state,
-    autoFocus,
-    disabled,
-  } = props;
+  const { sx, variant, tooltip, tooltipPlacement, onClick, className, children, autoFocus, disabled, disableRipple = false } = props;
 
   const { t } = useTranslation<string>();
 
-  const buttonRef = useRef<HTMLElement>(null);
   const theme = useTheme();
-  const classes = useStyles();
+  const sxClasses = getSxClasses(theme);
+
   const sxProps = {
-    ...sx,
     ...(theme.palette.mode === 'light' && {
       backgroundColor: 'primary.light',
       color: 'primary.dark',
       '&:hover': { backgroundColor: 'primary.main', color: 'white' },
     }),
+    ...sx,
   };
-  /**
-   * Get text container with provided text content
-   *
-   * @returns {ReactNode} return the text container
-   */
-  const getText = useCallback((): ReactNode => {
-    let textContent: ReactNode;
-    if (children === undefined) {
-      textContent = <div />;
-    } else if (typeof children === 'string') {
-      textContent = (
-        <HtmlToReact
-          className={`${classes.text} ${textClassName}`}
-          style={type === 'text' ? { marginLeft: 'initial' } : {}}
-          htmlContent={children}
-        />
-      );
-    } else {
-      textContent = (
-        <div className={`${classes.text} ${textClassName}`} style={type === 'text' ? { marginLeft: 'initial' } : {}}>
-          {children}
-        </div>
-      );
-    }
-
-    return textContent;
-  }, [children, classes.text, textClassName, type]);
-
-  /**
-   * Get icon container with provided icon content
-   *
-   * @returns {ReactNode} returns icon container
-   */
-  const getIcon = useCallback((): ReactNode => {
-    let iconContent: ReactNode;
-
-    if (icon === undefined) {
-      iconContent = <div />;
-    } else if (typeof icon === 'string') {
-      iconContent = <HtmlToReact className={`${classes.icon} ${iconClassName}`} htmlContent={icon} />;
-    } else {
-      iconContent = <div className={`${classes.icon} ${iconClassName}`}>{icon}</div>;
-    }
-
-    return iconContent;
-  }, [classes.icon, icon, iconClassName]);
-
-  /**
-   * Create a text only button
-   *
-   * @returns {ReactNode} return the created text button
-   */
-  const createTextButton = useCallback((): ReactNode => {
-    return getText();
-  }, [getText]);
-
-  /**
-   * Create an icon only button
-   *
-   * @returns {ReactNode} return the created icon button
-   */
-  const createIconButton = useCallback((): ReactNode => {
-    return getIcon();
-  }, [getIcon]);
-
-  /**
-   * Create a button with icon and text
-   *
-   * @returns {ReactNode} return a button with an icon and text
-   */
-  const createTextIconButton = useCallback((): ReactNode => {
-    return (
-      <div className={classes.textIconContainer}>
-        {getIcon()}
-        {state !== undefined && state === 'expanded' && getText()}
-      </div>
-    );
-  }, [classes.textIconContainer, getIcon, getText, state]);
-
-  useEffect(() => {
-    // disable events on container
-    const newButtonChildrenHTMLElements = Cast<HTMLElement[]>(buttonRef.current?.children);
-    if (newButtonChildrenHTMLElements.length > 0) {
-      // TODO disable map events
-    }
-
-    // check button type
-    if (type) {
-      if (type === 'text') {
-        setContent(createTextButton());
-      } else if (type === 'textWithIcon') {
-        setContent(createTextIconButton());
-      } else if (type === 'icon') {
-        setContent(createIconButton());
-      }
-    }
-  }, [createIconButton, createTextButton, createTextIconButton, state, type]);
 
   return (
-    <Tooltip title={t((tooltip as string) || '') as string} placement={tooltipPlacement} TransitionComponent={Fade} ref={buttonRef}>
+    <Tooltip title={t(tooltip || '')} placement={tooltipPlacement || 'bottom'} TransitionComponent={Fade}>
       <MaterialButton
-        sx={sxProps}
+        sx={{ ...sxClasses.buttonClass, ...sxProps }}
         variant={variant || 'text'}
-        className={`${classes.buttonClass} ${className || ''}`}
-        style={style}
+        className={`${className || ''}`}
         onClick={onClick}
         autoFocus={autoFocus}
         disabled={disabled}
+        disableRipple={disableRipple}
       >
-        {content}
+        {children}
       </MaterialButton>
     </Tooltip>
   );
diff --git a/packages/geoview-core/src/ui/divider/divider-style.ts b/packages/geoview-core/src/ui/divider/divider-style.ts
new file mode 100644
index 00000000000..b47151213cd
--- /dev/null
+++ b/packages/geoview-core/src/ui/divider/divider-style.ts
@@ -0,0 +1,18 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  vertical: {
+    alignSelf: 'center',
+    height: 40,
+    width: '1px !important',
+    backgroundColor: theme.palette.primary.contrastText,
+  },
+  horizontal: {
+    height: 1,
+    backgroundColor: theme.palette.primary.contrastText,
+  },
+  grow: {
+    flexGrow: 1,
+    backgroundColor: theme.palette.primary.main,
+  },
+});
diff --git a/packages/geoview-core/src/ui/divider/divider.tsx b/packages/geoview-core/src/ui/divider/divider.tsx
index e51d44a3db1..5cde1ca82c4 100644
--- a/packages/geoview-core/src/ui/divider/divider.tsx
+++ b/packages/geoview-core/src/ui/divider/divider.tsx
@@ -1,7 +1,6 @@
 /* eslint-disable react/require-default-props */
-import { Divider as MaterialDivider, DividerProps } from '@mui/material';
-
-import makeStyles from '@mui/styles/makeStyles';
+import { Divider as MaterialDivider, DividerProps, useTheme } from '@mui/material';
+import { getSxClasses } from './divider-style';
 
 /**
  * Properties for the Divider
@@ -11,23 +10,6 @@ interface TypeDividerProps extends DividerProps {
   grow?: boolean;
 }
 
-const useStyles = makeStyles((theme) => ({
-  vertical: {
-    alignSelf: 'center',
-    height: 40,
-    width: 1,
-    backgroundColor: theme.palette.primary.contrastText,
-  },
-  horizontal: {
-    height: 1,
-    backgroundColor: theme.palette.primary.contrastText,
-  },
-  grow: {
-    flexGrow: 1,
-    backgroundColor: theme.palette.primary.main,
-  },
-}));
-
 /**
  * Create a customized Material UI Divider
  *
@@ -37,18 +19,14 @@ const useStyles = makeStyles((theme) => ({
 export function Divider(props: TypeDividerProps): JSX.Element {
   const { className, style, grow, orientation } = props;
 
-  const classes = useStyles();
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
 
-  let dividerOrientation = classes.horizontal;
+  let dividerOrientation = sxClasses.horizontal;
 
   if (orientation) {
-    dividerOrientation = orientation === 'horizontal' ? classes.horizontal : classes.vertical;
+    dividerOrientation = orientation === 'horizontal' ? sxClasses.horizontal : sxClasses.vertical;
   }
 
-  return (
-    <MaterialDivider
-      className={`${dividerOrientation} ${grow !== undefined && grow ? classes.grow : ''} ${className !== undefined ? className : ''}`}
-      style={style}
-    />
-  );
+  return <MaterialDivider sx={{ ...(grow ? sxClasses.grow : {}), ...dividerOrientation }} className={`${className ?? ''}`} style={style} />;
 }
diff --git a/packages/geoview-core/src/ui/drawer/drawer-style.ts b/packages/geoview-core/src/ui/drawer/drawer-style.ts
new file mode 100644
index 00000000000..efb00ea4f9e
--- /dev/null
+++ b/packages/geoview-core/src/ui/drawer/drawer-style.ts
@@ -0,0 +1,37 @@
+import { Theme } from '@mui/material/styles';
+
+const drawerWidth = 200;
+export const getSxClasses = (theme: Theme) => ({
+  drawer: {
+    width: drawerWidth,
+    flexShrink: 0,
+    whiteSpace: 'nowrap',
+  },
+  drawerOpen: {
+    width: drawerWidth,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    '& $toolbar': {
+      justifyContent: 'flex-end',
+    },
+  },
+  drawerClose: {
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen,
+    }),
+    overflowX: 'hidden',
+    width: '61px',
+    '& $toolbar': {
+      justifyContent: 'center',
+    },
+  },
+  toolbar: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: theme.spacing(0, 1),
+  },
+});
diff --git a/packages/geoview-core/src/ui/drawer/drawer.tsx b/packages/geoview-core/src/ui/drawer/drawer.tsx
index 51c201cb580..6166be52ffc 100644
--- a/packages/geoview-core/src/ui/drawer/drawer.tsx
+++ b/packages/geoview-core/src/ui/drawer/drawer.tsx
@@ -2,9 +2,7 @@ import { useContext, useEffect, useState } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
-import { Drawer as MaterialDrawer, DrawerProps } from '@mui/material';
-
-import makeStyles from '@mui/styles/makeStyles';
+import { Drawer as MaterialDrawer, DrawerProps, useTheme, Box } from '@mui/material';
 
 import { api } from '@/app';
 import { EVENT_NAMES } from '@/api/events/event-types';
@@ -12,6 +10,7 @@ import { EVENT_NAMES } from '@/api/events/event-types';
 import { IconButton, ChevronLeftIcon, ChevronRightIcon } from '..';
 import { MapContext } from '@/core/app-start';
 import { PayloadBaseClass, booleanPayload, payloadIsABoolean } from '@/api/events/payloads';
+import { getSxClasses } from './drawer-style';
 
 /**
  * Drawer Properties
@@ -21,42 +20,6 @@ export interface TypeDrawerProps extends DrawerProps {
   status?: boolean;
 }
 
-const drawerWidth = 200;
-const useStyles = makeStyles((theme) => ({
-  drawer: {
-    width: drawerWidth,
-    flexShrink: 0,
-    whiteSpace: 'nowrap',
-  },
-  drawerOpen: {
-    width: drawerWidth,
-    transition: theme.transitions.create('width', {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.enteringScreen,
-    }),
-    '& $toolbar': {
-      justifyContent: 'flex-end',
-    },
-  },
-  drawerClose: {
-    transition: theme.transitions.create('width', {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
-    }),
-    overflowX: 'hidden',
-    width: '61px',
-    '& $toolbar': {
-      justifyContent: 'center',
-    },
-  },
-  toolbar: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: theme.spacing(0, 1),
-  },
-}));
-
 /**
  * Create a customized Material UI Drawer
  *
@@ -70,7 +33,8 @@ export function Drawer(props: TypeDrawerProps): JSX.Element {
 
   const { t } = useTranslation<string>();
 
-  const classes = useStyles();
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
 
   const mapConfig = useContext(MapContext);
 
@@ -109,13 +73,13 @@ export function Drawer(props: TypeDrawerProps): JSX.Element {
   return (
     <MaterialDrawer
       variant={variant || 'permanent'}
-      className={open ? classes.drawerOpen : classes.drawerClose}
+      sx={open ? sxClasses.drawerOpen : sxClasses.drawerClose}
       classes={{
-        paper: className || (open ? classes.drawerOpen : classes.drawerClose),
+        paper: className,
       }}
       style={style || undefined}
     >
-      <div className={classes.toolbar}>
+      <Box sx={sxClasses.toolbar}>
         <IconButton
           tooltip={open ? t('general.close')! : t('general.open')!}
           tooltipPlacement="right"
@@ -126,7 +90,7 @@ export function Drawer(props: TypeDrawerProps): JSX.Element {
         >
           {!open ? <ChevronRightIcon /> : <ChevronLeftIcon />}
         </IconButton>
-      </div>
+      </Box>
       {children !== undefined && children}
     </MaterialDrawer>
   );
diff --git a/packages/geoview-core/src/ui/icons/index.ts b/packages/geoview-core/src/ui/icons/index.ts
index 272820e552f..0597ad6994d 100644
--- a/packages/geoview-core/src/ui/icons/index.ts
+++ b/packages/geoview-core/src/ui/icons/index.ts
@@ -35,8 +35,10 @@ export {
   GroupWorkOutlined as GroupWorkOutlinedIcon,
   Help as HelpIcon,
   Home as HomeIcon,
+  HubOutlined as HubOutlinedIcon,
   ImportExport as ReorderIcon,
   Info as InfoIcon,
+  InfoOutlined as InfoOutlinedIcon,
   KeyboardArrowDown as KeyboardArrowDownIcon,
   KeyboardArrowUp as KeyboardArrowUpIcon,
   KeyboardArrowRight as KeyboardArrowRightIcon,
@@ -61,6 +63,7 @@ export {
   Remove as ZoomOutIcon,
   Search as SearchIcon,
   Send as SendIcon,
+  Storage as StorageIcon,
   Visibility as VisibilityIcon,
   VisibilityOff as VisibilityOffIcon,
   VisibilityOutlined as VisibilityOutlinedIcon,
diff --git a/packages/geoview-core/src/ui/list/checkbox-list/checkbox-list-enhanced.tsx b/packages/geoview-core/src/ui/list/checkbox-list/checkbox-list-enhanced.tsx
index 25fe478d4df..56e6e7bce18 100644
--- a/packages/geoview-core/src/ui/list/checkbox-list/checkbox-list-enhanced.tsx
+++ b/packages/geoview-core/src/ui/list/checkbox-list/checkbox-list-enhanced.tsx
@@ -1,9 +1,7 @@
 /* eslint-disable no-plusplus */
 import { useState, useEffect } from 'react';
 
-import { Typography } from '@mui/material';
-import createStyles from '@mui/styles/createStyles';
-import makeStyles from '@mui/styles/makeStyles';
+import { Typography, useTheme } from '@mui/material';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
@@ -11,32 +9,7 @@ import Checkbox from '@mui/material/Checkbox';
 import Box from '@mui/material/Box';
 
 import { HtmlToReact } from '../../../core/containers/html-to-react';
-
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    list: {
-      padding: 0,
-    },
-    typography: {
-      padding: 0,
-    },
-    listItem: {
-      height: '28px',
-      padding: 0,
-      color: theme.palette.secondary.contrastText,
-      '&:hover': {
-        backgroundColor: '#dddddd',
-        color: theme.palette.primary.dark,
-      },
-    },
-    listItemIcon: {
-      minWidth: '0px',
-    },
-    boxcontent: {
-      padding: 0,
-    },
-  })
-);
+import { getSxClasses } from './checkbox-list-style';
 
 /**
  * interface for CheckboxList basic properties
@@ -57,7 +30,8 @@ export type CheckboxListEnhancedItem = {
 export function CheckboxListEnhanced(props: CheckboxListEnhancedType): JSX.Element {
   const { listItems, checkedValues, multiselect, checkedCallback } = props;
 
-  const classes = useStyles();
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
 
   const [checked, _setChecked] = useState([...checkedValues]);
 
@@ -89,13 +63,13 @@ export function CheckboxListEnhanced(props: CheckboxListEnhancedType): JSX.Eleme
   }, [checked, checkedValues]);
 
   return (
-    <List className={classes.list}>
+    <List sx={sxClasses.list}>
       {listItems.map((item: CheckboxListEnhancedItem, idx: number) => {
         const labelId = `checkbox-list-label-${idx}`;
 
         return (
-          <ListItem className={classes.listItem} title={item.display} key={item.value} dense onClick={() => handleToggle(item.value)}>
-            <ListItemIcon className={classes.listItemIcon}>
+          <ListItem sx={sxClasses.listItem} title={item.display} key={item.value} dense onClick={() => handleToggle(item.value)}>
+            <ListItemIcon sx={sxClasses.listItemIcon}>
               <Checkbox
                 edge="start"
                 checked={checked.includes(item.value)}
@@ -104,10 +78,10 @@ export function CheckboxListEnhanced(props: CheckboxListEnhancedType): JSX.Eleme
                 inputProps={{ 'aria-labelledby': labelId }}
               />
             </ListItemIcon>
-            <Typography className={classes.typography} variant="body2" noWrap component="ul">
+            <Typography sx={sxClasses.typography} variant="body2" noWrap component="ul">
               {item.display}
             </Typography>
-            <Box className={`Checkbox-content-root ${classes.boxcontent}`} onClick={(e) => handleClickContent(e)}>
+            <Box sx={sxClasses.boxcontent} className="Checkbox-content-root" onClick={(e) => handleClickContent(e)}>
               {typeof item.content === 'string' ? <HtmlToReact htmlContent={item.content} /> : item.content}
             </Box>
           </ListItem>
diff --git a/packages/geoview-core/src/ui/list/checkbox-list/checkbox-list-style.ts b/packages/geoview-core/src/ui/list/checkbox-list/checkbox-list-style.ts
new file mode 100644
index 00000000000..4ac1152cfbc
--- /dev/null
+++ b/packages/geoview-core/src/ui/list/checkbox-list/checkbox-list-style.ts
@@ -0,0 +1,25 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  list: {
+    padding: 0,
+  },
+  typography: {
+    padding: 0,
+  },
+  listItem: {
+    height: '28px',
+    padding: 0,
+    color: theme.palette.secondary.contrastText,
+    '&:hover': {
+      backgroundColor: '#dddddd',
+      color: theme.palette.primary.dark,
+    },
+  },
+  listItemIcon: {
+    minWidth: '0px',
+  },
+  boxcontent: {
+    padding: 0,
+  },
+});
diff --git a/packages/geoview-core/src/ui/list/checkbox-list/checkbox-list.tsx b/packages/geoview-core/src/ui/list/checkbox-list/checkbox-list.tsx
index 3cc54a549a1..2c4aed6f365 100644
--- a/packages/geoview-core/src/ui/list/checkbox-list/checkbox-list.tsx
+++ b/packages/geoview-core/src/ui/list/checkbox-list/checkbox-list.tsx
@@ -1,32 +1,7 @@
 import { useState } from 'react';
 
-import { Checkbox, List, ListItem, ListItemIcon, Typography } from '@mui/material';
-
-import createStyles from '@mui/styles/createStyles';
-import makeStyles from '@mui/styles/makeStyles';
-
-const useStyles = makeStyles((theme) =>
-  createStyles({
-    list: {
-      padding: 0,
-    },
-    typography: {
-      padding: 0,
-    },
-    listItem: {
-      height: '28px',
-      padding: 0,
-      color: theme.palette.secondary.contrastText,
-      '&:hover': {
-        backgroundColor: '#dddddd',
-        color: theme.palette.primary.dark,
-      },
-    },
-    listItemIcon: {
-      minWidth: '0px',
-    },
-  })
-);
+import { Checkbox, List, ListItem, ListItemIcon, Typography, useTheme } from '@mui/material';
+import { getSxClasses } from './checkbox-list-style';
 
 /**
  * interface for CheckboxList basic properties
@@ -39,7 +14,9 @@ interface CheckboxListType {
 }
 
 export function CheckboxList({ listItems, multiselect, checkedItems, setApiCheckedItems }: CheckboxListType): JSX.Element {
-  const classes = useStyles();
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
+
   const [listOfItems] = useState(listItems);
   const [checked, setChecked] = useState(checkedItems);
   let keyValue = 0;
@@ -64,13 +41,13 @@ export function CheckboxList({ listItems, multiselect, checkedItems, setApiCheck
   };
 
   return (
-    <List className={classes.list}>
+    <List sx={sxClasses.list}>
       {listOfItems.map((value, index) => {
         const labelId = `checkbox-list-label-${index}`;
 
         return (
-          <ListItem className={classes.listItem} title={value} key={keyValue++} dense onClick={handleToggle(index)}>
-            <ListItemIcon className={classes.listItemIcon}>
+          <ListItem sx={sxClasses.listItem} title={value} key={keyValue++} dense onClick={handleToggle(index)}>
+            <ListItemIcon sx={sxClasses.listItemIcon}>
               <Checkbox
                 edge="start"
                 checked={checked.indexOf(index) !== -1}
@@ -79,7 +56,7 @@ export function CheckboxList({ listItems, multiselect, checkedItems, setApiCheck
                 inputProps={{ 'aria-labelledby': labelId }}
               />
             </ListItemIcon>
-            <Typography className={classes.typography} variant="body2" noWrap component="ul">
+            <Typography sx={sxClasses.typography} variant="body2" noWrap component="ul">
               {value}
             </Typography>
           </ListItem>
diff --git a/packages/geoview-core/src/ui/modal/modal-style.ts b/packages/geoview-core/src/ui/modal/modal-style.ts
new file mode 100644
index 00000000000..f82ab7c20e4
--- /dev/null
+++ b/packages/geoview-core/src/ui/modal/modal-style.ts
@@ -0,0 +1,52 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  dialog: {
+    position: 'absolute',
+    "& ~ & > div[class*='backdrop']": {
+      backgroundColor: 'transparent',
+    },
+    '& .MuiPaper-root': {
+      width: 450,
+    },
+  },
+  backdrop: {
+    position: 'absolute',
+    background: theme.palette.backdrop,
+  },
+  content: {
+    padding: theme.spacing(5, 0),
+    whiteSpace: 'pre-line',
+  },
+  modalTitleContainer: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '5px 10px',
+  },
+  modalTitleLabel: {
+    display: 'flex',
+    justifyContent: 'flex-start',
+  },
+  modalTitleActions: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+  },
+  headerActionsContainer: {
+    display: 'flex',
+    padding: '5px 10px',
+    '& > *:not(:last-child)': {
+      marginRight: theme.spacing(3),
+    },
+  },
+  closedModal: {
+    display: 'none',
+  },
+  createdAction: {
+    width: `30%`,
+    alignSelf: 'flex-end',
+    '& > * ': {
+      textAlign: 'center',
+    },
+  },
+});
diff --git a/packages/geoview-core/src/ui/modal/modal.tsx b/packages/geoview-core/src/ui/modal/modal.tsx
index 34d5b7ff2d3..443f9653f08 100644
--- a/packages/geoview-core/src/ui/modal/modal.tsx
+++ b/packages/geoview-core/src/ui/modal/modal.tsx
@@ -6,9 +6,8 @@ import { useTranslation } from 'react-i18next';
 
 import { ClassNameMap } from '@mui/styles';
 import withStyles from '@mui/styles/withStyles';
-import makeStyles from '@mui/styles/makeStyles';
 
-import { Dialog, DialogActions, DialogContent, DialogProps, DialogTitle } from '@mui/material';
+import { Box, Dialog, DialogActions, DialogContent, DialogProps, DialogTitle, useTheme } from '@mui/material';
 
 import { TypeJsonObject } from '@/core/types/global-types';
 import { HtmlToReact } from '@/core/containers/html-to-react';
@@ -19,6 +18,7 @@ import { api } from '@/app';
 import { TypeModalProps } from '.';
 import { CloseIcon, IconButton } from '..';
 import { PayloadBaseClass, payloadIsAModal } from '@/api/events/payloads';
+import { getSxClasses } from './modal-style';
 
 /**
  * Customized Material UI Dialog Properties
@@ -51,54 +51,6 @@ interface TypeDialogProps extends Omit<DialogProps, 'title'> {
   mapId: string;
 }
 
-const useStyles = makeStyles((theme) => ({
-  dialog: {
-    position: 'absolute',
-    "& ~ & > div[class*='backdrop']": {
-      backgroundColor: 'transparent',
-    },
-  },
-  backdrop: {
-    position: 'absolute',
-    background: theme.palette.backdrop,
-  },
-  content: {
-    padding: theme.spacing(5, 0),
-    whiteSpace: 'pre-line',
-  },
-  modalTitleContainer: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    padding: '5px 10px',
-  },
-  modalTitleLabel: {
-    display: 'flex',
-    justifyContent: 'flex-start',
-  },
-  modalTitleActions: {
-    display: 'flex',
-    justifyContent: 'flex-end',
-  },
-  headerActionsContainer: {
-    display: 'flex',
-    padding: '5px 10px',
-    '& > *:not(:last-child)': {
-      marginRight: theme.spacing(3),
-    },
-  },
-  closedModal: {
-    display: 'none',
-  },
-  createdAction: {
-    width: `30%`,
-    alignSelf: 'flex-end',
-    '& > * ': {
-      textAlign: 'center',
-    },
-  },
-}));
-
 /**
  * Create a customized Material UI Dialog
  *
@@ -133,7 +85,9 @@ export function Modal(props: TypeDialogProps): JSX.Element {
   const { t } = useTranslation();
 
   let openEvent = false;
-  const dialogClasses = useStyles();
+
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
 
   /**
    * Causes the modal to re-render
@@ -163,20 +117,20 @@ export function Modal(props: TypeDialogProps): JSX.Element {
         open={openEvent}
         onClose={modal.close}
         container={document.querySelector(`#${modal.mapId}`)}
-        className={`${dialogClasses.dialog} ${className && className}`}
+        sx={sxClasses.dialog}
+        className={`${className && className}`}
         classes={{
           paper: classes.dialogContent,
         }}
         aria-labelledby={ariaLabeledBy}
         aria-describedby={ariaDescribedBy}
         fullScreen={fullScreen}
-        BackdropProps={{ classes: { root: dialogClasses.backdrop } }}
       >
-        <div className={dialogClasses.modalTitleContainer}>
-          {modal.header?.title ? <DialogTitle className={dialogClasses.modalTitleLabel}>{modal.header?.title}</DialogTitle> : null}
-          <div className={dialogClasses.modalTitleActions}>
+        <Box sx={sxClasses.modalTitleContainer}>
+          {modal.header?.title ? <DialogTitle sx={sxClasses.modalTitleLabel}>{modal.header?.title}</DialogTitle> : null}
+          <Box sx={sxClasses.modalTitleActions}>
             {modal.header?.actions !== undefined && modal.header?.actions.length >= 1 ? (
-              <div className={dialogClasses.headerActionsContainer}>
+              <Box sx={sxClasses.headerActionsContainer}>
                 {modal.header?.actions.map((action) => {
                   if (typeof action.content === 'string') {
                     return (
@@ -190,7 +144,7 @@ export function Modal(props: TypeDialogProps): JSX.Element {
                   }
                   return <Fragment key={action.actionId}>{action.content}</Fragment>;
                 })}
-              </div>
+              </Box>
             ) : null}
             <IconButton
               id={`${modalId}-close-button`}
@@ -201,12 +155,12 @@ export function Modal(props: TypeDialogProps): JSX.Element {
             >
               <CloseIcon />
             </IconButton>
-          </div>
-        </div>
+          </Box>
+        </Box>
         <DialogContent>
           <div
             id={contentTextId}
-            className={`${dialogClasses.content} ${contentTextClassName && contentTextClassName}`}
+            className={`${sxClasses.content} ${contentTextClassName && contentTextClassName}`}
             style={contentTextStyle}
           >
             {typeof modal.content === 'string' ? <HtmlToReact htmlContent={modal.content} /> : modal.content}
@@ -257,7 +211,7 @@ export function Modal(props: TypeDialogProps): JSX.Element {
     if (payloadIsAModal(payload)) {
       if (modalId === payload.modalId) {
         if (!payload.open) openEvent = false;
-        setCreatedModal(<Dialog open={openEvent} className={dialogClasses.closedModal} />);
+        setCreatedModal(<Dialog open={openEvent} sx={sxClasses.closedModal} />);
       }
     }
   };
@@ -284,21 +238,19 @@ export function Modal(props: TypeDialogProps): JSX.Element {
     createdModal || (
       <Dialog
         open={open || openEvent}
-        className={`${dialogClasses.dialog} ${className && className}`}
+        sx={sxClasses.dialog}
+        className={`${className && className}`}
         style={{ ...style, position: 'absolute' }}
         aria-labelledby={ariaLabeledBy}
         aria-describedby={ariaDescribedBy}
         fullScreen={fullScreen}
-        BackdropProps={{
-          classes: { root: dialogClasses.backdrop },
-        }}
         container={container}
       >
         <DialogTitle id={titleId}>{title}</DialogTitle>
         <DialogContent className={contentClassName} style={contentStyle}>
           <div
             id={contentTextId}
-            className={`${dialogClasses.content} ${contentTextClassName && contentTextClassName}`}
+            className={`${sxClasses.content} ${contentTextClassName && contentTextClassName}`}
             style={contentTextStyle}
           >
             {contentModal}
diff --git a/packages/geoview-core/src/ui/panel/panel-style.ts b/packages/geoview-core/src/ui/panel/panel-style.ts
new file mode 100644
index 00000000000..786d5ee82c4
--- /dev/null
+++ b/packages/geoview-core/src/ui/panel/panel-style.ts
@@ -0,0 +1,57 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  panelContainer: {
+    backgroundColor: theme.panel.background!,
+    height: 'calc(100% - 35px)',
+    borderRadius: 0,
+    flexDirection: 'column',
+    [theme.breakpoints.down('sm')]: {
+      width: '100%',
+      minWidth: '100%',
+    }!,
+    '& .MuiCardHeader-root': {
+      backgroundColor: theme.panel.background!,
+      borderBottomColor: theme.panel.border!,
+      borderBottomWidth: 1,
+      borderBottomStyle: 'solid',
+      height: 64,
+    },
+    '& .MuiCardHeader-title': {
+      fontSize: 15,
+      paddingTop: 8,
+      textTransform: 'uppercase',
+    },
+    '& .MuiCardHeader-action': {
+      '& .MuiButtonBase-root': {
+        border: `1px solid ${theme.appBar.btnDefaultBg!}`,
+        height: 44,
+        width: 44,
+        marginRight: 8,
+        transition: 'all 0.3s ease-in-out',
+        '& .MuiSvgIcon-root': {
+          width: 24,
+          height: 24,
+        },
+        '&:last-child': {
+          marginRight: 0,
+        },
+        '&:hover': {
+          backgroundColor: theme.appBar.btnHoverBg!,
+        },
+      },
+    },
+  },
+  panelContentContainer: {
+    position: 'relative',
+    flexBasis: 'auto',
+    overflow: 'hidden',
+    overflowY: 'auto',
+    boxSizing: 'border-box',
+    marginBottom: 16,
+    '&:last-child': {
+      paddingBottom: 0,
+    },
+    height: 'calc(100% - 64px)',
+  },
+});
diff --git a/packages/geoview-core/src/ui/panel/panel.tsx b/packages/geoview-core/src/ui/panel/panel.tsx
index e26bc35d4c0..d3173237484 100644
--- a/packages/geoview-core/src/ui/panel/panel.tsx
+++ b/packages/geoview-core/src/ui/panel/panel.tsx
@@ -1,13 +1,12 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
 /* eslint-disable react/jsx-no-useless-fragment */
 /* eslint-disable no-nested-ternary */
-import { useRef, useState, useEffect, useCallback, useContext, ReactNode } from 'react';
+import { useRef, useState, useEffect, useCallback, useContext, ReactNode, KeyboardEvent } from 'react';
 
 import { useTranslation } from 'react-i18next';
 
 import FocusTrap from 'focus-trap-react';
 
-import makeStyles from '@mui/styles/makeStyles';
 import Card from '@mui/material/Card';
 import CardHeader from '@mui/material/CardHeader';
 import CardContent from '@mui/material/CardContent';
@@ -30,6 +29,7 @@ import {
   PayloadBaseClass,
 } from '@/api/events/payloads';
 import { TypeIconButtonProps } from '../icon-button/icon-button-types';
+import { getSxClasses } from './panel-style';
 
 /**
  * Interface for panel properties
@@ -43,62 +43,6 @@ type TypePanelAppProps = {
   handlePanelOpened?: () => void;
 };
 
-const useStyles = makeStyles((theme) => ({
-  panelContainer: {
-    backgroundColor: theme.panel.background,
-    height: 'calc(100% - 35px)',
-    borderRadius: 0,
-    flexDirection: 'column',
-    [theme.breakpoints.down('sm')]: {
-      width: '100%',
-      minWidth: '100%',
-    },
-  },
-  panelHeader: {
-    backgroundColor: theme.panel.background,
-    borderBottomColor: theme.panel.border,
-    borderBottomWidth: 1,
-    borderBottomStyle: 'solid',
-    height: 64,
-  },
-  panelHeaderTitle: {
-    fontSize: 15,
-    paddingTop: 8,
-    textTransform: 'uppercase',
-  },
-  panelHeaderAction: {
-    '& .MuiButtonBase-root': {
-      border: `1px solid ${theme.appBar.btnDefaultBg}`,
-      height: 44,
-      width: 44,
-      marginRight: 8,
-      transition: 'all 0.3s ease-in-out',
-      '& .MuiSvgIcon-root': {
-        width: 24,
-        height: 24,
-      },
-      '&:last-child': {
-        marginRight: 0,
-      },
-      '&:hover': {
-        backgroundColor: theme.appBar.btnHoverBg,
-      },
-    },
-  },
-  panelContentContainer: {
-    position: 'relative',
-    flexBasis: 'auto',
-    overflow: 'hidden',
-    overflowY: 'auto',
-    boxSizing: 'border-box',
-    marginBottom: 16,
-    '&:last-child': {
-      paddingBottom: 0,
-    },
-    height: 'calc(100% - 64px)',
-  },
-}));
-
 /**
  * Create a panel with a header title, icon and content
  * @param {TypePanelAppProps} props panel properties
@@ -113,6 +57,7 @@ export function Panel(props: TypePanelAppProps): JSX.Element {
 
   // Get the theme
   const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
 
   const panelWidth = panel?.width ?? 350;
   const panelContainerStyles = {
@@ -124,7 +69,6 @@ export function Panel(props: TypePanelAppProps): JSX.Element {
   const [actionButtons, setActionButtons] = useState<JSX.Element[] & ReactNode[]>([]);
   const [, updatePanelContent] = useState(0);
 
-  const classes = useStyles(props);
   const { t } = useTranslation<string>();
 
   const mapConfig = useContext(MapContext)!;
@@ -301,10 +245,13 @@ export function Panel(props: TypePanelAppProps): JSX.Element {
         }}
       >
         <Card
-          sx={{ display: panelStatus ? 'block' : 'none', ...(panelStyles?.panelCard && { ...panelStyles.panelCard }) }}
+          sx={{
+            ...sxClasses.panelContainer,
+            display: panelStatus ? 'block' : 'none',
+            ...(panelStyles?.panelCard && { ...panelStyles.panelCard }),
+          }}
           ref={panelRef as React.MutableRefObject<null>}
-          className={classes.panelContainer}
-          onKeyDown={(e) => {
+          onKeyDown={(e: KeyboardEvent) => {
             if (e.key === 'Escape') {
               panel.close();
             }
@@ -312,11 +259,6 @@ export function Panel(props: TypePanelAppProps): JSX.Element {
           {...{ 'data-id': button.id }}
         >
           <CardHeader
-            classes={{
-              root: classes.panelHeader,
-              title: classes.panelHeaderTitle,
-              action: classes.panelHeaderAction,
-            }}
             sx={panelStyles?.panelCardHeader ? { ...panelStyles.panelCardHeader } : {}}
             ref={panelHeader}
             title={t(panel.title)}
@@ -345,7 +287,7 @@ export function Panel(props: TypePanelAppProps): JSX.Element {
             }
           />
 
-          <CardContent className={classes.panelContentContainer} sx={panelStyles?.panelCardContent ?? {}}>
+          <CardContent sx={{ ...sxClasses.panelContentContainer, ...(panelStyles ? panelStyles.panelCardContent : {}) }}>
             {typeof panel.content === 'string' ? <HtmlToReact htmlContent={panel.content} /> : panel.content}
           </CardContent>
         </Card>
diff --git a/packages/geoview-core/src/ui/select/custom-select-style.ts b/packages/geoview-core/src/ui/select/custom-select-style.ts
new file mode 100644
index 00000000000..0efdc42b173
--- /dev/null
+++ b/packages/geoview-core/src/ui/select/custom-select-style.ts
@@ -0,0 +1,25 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  formControl: {
+    width: '50%',
+    margin: '15px 0',
+    '& .MuiFormLabel-root.Mui-focused': {
+      color: theme.palette.primary.contrastText,
+      background: theme.palette.primary.light,
+    },
+    '& .MuiOutlinedInput-root.Mui-focused': {
+      border: `1px solid ${theme.palette.primary.contrastText}`,
+    },
+  },
+  label: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    transform: 'translate(14px, -9px) scale(0.75)',
+    background: theme.palette.primary.light,
+  },
+  select: {
+    width: '100%',
+  },
+});
diff --git a/packages/geoview-core/src/ui/select/custom-select.tsx b/packages/geoview-core/src/ui/select/custom-select.tsx
index 8bb6375c893..36e886e30b1 100644
--- a/packages/geoview-core/src/ui/select/custom-select.tsx
+++ b/packages/geoview-core/src/ui/select/custom-select.tsx
@@ -10,9 +10,10 @@ import {
   MenuItem,
   Select as MaterialSelect,
   SelectChangeEvent,
+  useTheme,
 } from '@mui/material';
 
-import makeStyles from '@mui/styles/makeStyles';
+import { getSxClasses } from './custom-select-style';
 
 /**
  * Properties for the Custom Select component
@@ -55,30 +56,6 @@ export interface TypeItemProps {
   default?: boolean;
 }
 
-const useStyles = makeStyles((theme) => ({
-  formControl: {
-    width: '50%',
-    margin: '15px 0',
-    '& .MuiFormLabel-root.Mui-focused': {
-      color: theme.palette.primary.contrastText,
-      background: theme.palette.primary.light,
-    },
-    '& .MuiOutlinedInput-root.Mui-focused': {
-      border: `1px solid ${theme.palette.primary.contrastText}`,
-    },
-  },
-  label: {
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    transform: 'translate(14px, -9px) scale(0.75)',
-    background: theme.palette.primary.light,
-  },
-  select: {
-    width: '100%',
-  },
-}));
-
 /**
  * Create a customizable Material UI Select
  *
@@ -86,7 +63,9 @@ const useStyles = makeStyles((theme) => ({
  * @returns {JSX.Element} the created Select element
  */
 export function CustomSelect(props: TypeCustomSelectProps): JSX.Element {
-  const classes = useStyles();
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
+
   const [value, setValue] = useState('');
   const [multipleValue, setMultipleValue] = useState([]);
   const { className, style, labelId, label, selectItems, callBack, helperText, multiple, ...otherProps } = props;
@@ -133,12 +112,13 @@ export function CustomSelect(props: TypeCustomSelectProps): JSX.Element {
   }
 
   return (
-    <FormControl className={classes.formControl} {...otherProps}>
-      <InputLabel className={(isDefault && classes.label) as string} id={labelId}>
+    <FormControl sx={sxClasses.formControl} {...otherProps}>
+      <InputLabel sx={{ ...(isDefault ? sxClasses.label : {}) }} id={labelId}>
         {label}
       </InputLabel>
       <MaterialSelect
-        className={`${classes.select} ${className && className}`}
+        sx={sxClasses.select}
+        className={`${className && className}`}
         style={style}
         labelId={labelId}
         id={`select-${labelId}`}
diff --git a/packages/geoview-core/src/ui/select/select-style.ts b/packages/geoview-core/src/ui/select/select-style.ts
new file mode 100644
index 00000000000..46f4757a143
--- /dev/null
+++ b/packages/geoview-core/src/ui/select/select-style.ts
@@ -0,0 +1,39 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  formControl: {
+    fontSize: 14,
+    width: '100%',
+    marginBottom: '16px',
+    color: theme.palette.text.primary,
+    '& .MuiOutlinedInput-notchedOutline': {
+      border: `1px solid ${theme.palette.border.primary}`,
+      padding: '0 12px 0 8px',
+      '&[aria-hidden="true"]': {
+        border: `1px solid ${theme.palette.border.primary}`,
+      },
+    },
+    '&:hover': {
+      '& .MuiOutlinedInput-notchedOutline': {
+        border: `1px solid ${theme.palette.border.primary}`,
+      },
+    },
+    '& .MuiFormLabel-root.Mui-focused': {
+      color: theme.palette.primary.contrastText,
+      background: theme.palette.primary.light,
+    },
+    '& .MuiSelect-select': {
+      padding: '16px 12px',
+    },
+    '& .MuiSvgIcon-root': {
+      color: theme.palette.text.primary,
+    },
+  },
+  label: {
+    color: theme.palette.text.primary,
+    fontSize: 16,
+  },
+  menuItem: {
+    fontSize: 14,
+  },
+});
diff --git a/packages/geoview-core/src/ui/select/select.tsx b/packages/geoview-core/src/ui/select/select.tsx
index 9650369ffe1..dc46db05da5 100644
--- a/packages/geoview-core/src/ui/select/select.tsx
+++ b/packages/geoview-core/src/ui/select/select.tsx
@@ -9,9 +9,9 @@ import {
   MenuItemProps,
   Select as MaterialSelect,
   SelectProps,
+  useTheme,
 } from '@mui/material';
-
-import makeStyles from '@mui/styles/makeStyles';
+import { getSxClasses } from './select-style';
 
 /**
  * Custom MUI Select properties
@@ -31,43 +31,6 @@ interface TypeMenuItemProps {
   item: MenuItemProps | ListSubheaderProps | null;
 }
 
-const useStyles = makeStyles((theme) => ({
-  formControl: {
-    fontSize: 14,
-    width: '100%',
-    marginBottom: 16,
-    color: theme.palette.text.primary,
-    '& .MuiOutlinedInput-notchedOutline': {
-      border: `1px solid ${theme.palette.border.primary}`,
-      padding: '0 12px 0 8px',
-      '&[aria-hidden="true"]': {
-        border: `1px solid ${theme.palette.border.primary}`,
-      },
-    },
-    '&:hover': {
-      '& .MuiOutlinedInput-notchedOutline': {
-        border: `1px solid ${theme.palette.border.primary}`,
-      },
-    },
-    '& .MuiFormLabel-root.Mui-focused': {
-      color: theme.palette.primary.contrastText,
-      background: theme.palette.primary.light,
-    },
-    '& .MuiSelect-select': {
-      padding: '16px 12px',
-    },
-    '& .MuiSvgIcon-root': {
-      color: theme.palette.text.primary,
-    },
-  },
-  label: {
-    color: theme.palette.text.primary,
-    fontSize: 16,
-  },
-  menuItem: {
-    fontSize: 14,
-  },
-}));
 /**
  * Create a Material UI Select component
  *
@@ -76,14 +39,16 @@ const useStyles = makeStyles((theme) => ({
  */
 export function Select(props: TypeSelectProps): JSX.Element {
   const { fullWidth, inputLabel, menuItems, ...selectProps } = props;
-  const classes = useStyles();
+
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
 
   return (
     <FormControl fullWidth={fullWidth}>
-      <InputLabel className={classes.label} {...inputLabel}>
+      <InputLabel sx={sxClasses.label} {...inputLabel}>
         {selectProps.label}
       </InputLabel>
-      <MaterialSelect className={classes.formControl} {...selectProps}>
+      <MaterialSelect sx={sxClasses.formControl} {...selectProps}>
         {menuItems.map((menuItem: TypeMenuItemProps, index) => {
           if (menuItem) {
             if (menuItem.type === 'header') {
@@ -92,7 +57,7 @@ export function Select(props: TypeSelectProps): JSX.Element {
             }
 
             // eslint-disable-next-line react/no-array-index-key
-            return <MenuItem key={index} {...(menuItem.item as MenuItemProps)} className={classes.menuItem} />;
+            return <MenuItem key={index} {...(menuItem.item as MenuItemProps)} sx={sxClasses.menuItem} />;
           }
 
           return null;
diff --git a/packages/geoview-core/src/ui/slider/slider-style.ts b/packages/geoview-core/src/ui/slider/slider-style.ts
new file mode 100644
index 00000000000..de87c5d601b
--- /dev/null
+++ b/packages/geoview-core/src/ui/slider/slider-style.ts
@@ -0,0 +1,40 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  slider: {
+    '& .MuiSlider-root': {
+      color: '#fff',
+    },
+    '& .MuiSlider-thumb': {
+      width: 15,
+      height: 15,
+      color: theme.palette.common.black,
+      transition: '0.3s cubic-bezier(.47,1.64,.41,.8)',
+      '&:before': {
+        boxShadow: '0 2px 12px 0 rgba(0,0,0,0.4)',
+      },
+      '&:hover, &.Mui-focusVisible': {
+        boxShadow: `0px 0px 0px 8px ${'rgb(255 255 255 / 16%)'}`,
+      },
+      '&.Mui-active': {
+        width: 30,
+        height: 30,
+      },
+    },
+    '& .MuiSlider-rail': {
+      opacity: 0.35,
+      color: 'rgba(0,0,0,0.87)',
+    },
+    '& .MuiSlider-track': {
+      color: '#000',
+    },
+    '& .MuiSlider-mark': {
+      height: 4,
+      width: 4,
+      color: '#000',
+    },
+    '& .MuiSlider-markLabel-overlap': {
+      display: 'none',
+    },
+  },
+});
diff --git a/packages/geoview-core/src/ui/slider/slider.tsx b/packages/geoview-core/src/ui/slider/slider.tsx
index 040794caa4a..e5ed9a3b87c 100644
--- a/packages/geoview-core/src/ui/slider/slider.tsx
+++ b/packages/geoview-core/src/ui/slider/slider.tsx
@@ -1,13 +1,12 @@
 /* eslint-disable react/require-default-props */
 import { useState, useEffect, CSSProperties } from 'react';
 
-import { Slider as MaterialSlider, SliderProps } from '@mui/material';
-
-import makeStyles from '@mui/styles/makeStyles';
+import { Slider as MaterialSlider, SliderProps, useTheme } from '@mui/material';
 
 import { api } from '@/app';
 import { EVENT_NAMES } from '@/api/events/event-types';
 import { sliderPayload, payloadIsASlider, SliderTypePayload, PayloadBaseClass } from '@/api/events/payloads';
+import { getSxClasses } from './slider-style';
 
 /**
  * Properties for the Slider
@@ -40,45 +39,6 @@ interface TypeSliderProps extends SliderProps {
   mapId?: string;
 }
 
-const useStyles = makeStyles(() => ({
-  slider: {
-    '& .MuiSlider-root': {
-      color: '#fff',
-    },
-    '& .MuiSlider-thumb': {
-      width: 15,
-      height: 15,
-      color: '#000',
-      transition: '0.3s cubic-bezier(.47,1.64,.41,.8)',
-      '&:before': {
-        boxShadow: '0 2px 12px 0 rgba(0,0,0,0.4)',
-      },
-      '&:hover, &.Mui-focusVisible': {
-        boxShadow: `0px 0px 0px 8px ${'rgb(255 255 255 / 16%)'}`,
-      },
-      '&.Mui-active': {
-        width: 30,
-        height: 30,
-      },
-    },
-    '& .MuiSlider-rail': {
-      opacity: 0.35,
-      color: 'rgba(0,0,0,0.87)',
-    },
-    '& .MuiSlider-track': {
-      color: '#000',
-    },
-    '& .MuiSlider-mark': {
-      height: 4,
-      width: 4,
-      color: '#000',
-    },
-    '& .MuiSlider-markLabel-overlap': {
-      display: 'none',
-    },
-  },
-}));
-
 /**
  * Create a customized Material UI Slider (https://mui.com/material-ui/api/slider/)
  *
@@ -89,7 +49,8 @@ export function Slider(props: TypeSliderProps): JSX.Element {
   const { ...properties } = props;
   properties.sliderId = properties.id!;
 
-  const classes = useStyles();
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
 
   const [min, setMin] = useState<number>(properties.min);
   const [max, setMax] = useState<number>(properties.max);
@@ -198,7 +159,8 @@ export function Slider(props: TypeSliderProps): JSX.Element {
   // TODO: better implement WCAG on slider
   return (
     <MaterialSlider
-      className={properties.className !== undefined ? properties.className : classes.slider}
+      sx={{ ...(!properties.className ? sxClasses.slider : {}) }}
+      className={properties.className !== undefined ? properties.className : ''}
       style={properties.style}
       getAriaLabel={() => 'To implement with translation'}
       getAriaValueText={() => 'To implement with translation'}
diff --git a/packages/geoview-core/src/ui/stepper/custom-stepper-style.ts b/packages/geoview-core/src/ui/stepper/custom-stepper-style.ts
new file mode 100644
index 00000000000..86fa58aa3b2
--- /dev/null
+++ b/packages/geoview-core/src/ui/stepper/custom-stepper-style.ts
@@ -0,0 +1,38 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  stepperContainer: {
+    padding: 15,
+    width: 500,
+    minWidth: 150,
+    border: '0.5px solid grey',
+    flexWrap: 'wrap',
+    '& .MuiSvgIcon-root.Mui-active': {
+      color: '#90caf9',
+    },
+    '& .MuiSvgIcon-root.Mui-completed': {
+      color: '#666666',
+    },
+  },
+  actionContainer: {
+    marginTop: 20,
+    width: '100%',
+    display: 'flex',
+    flexWrap: 'wrap',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    '&>*:first-child': {
+      width: '100%',
+      marginBottom: 8,
+    },
+    '& > button': {
+      width: '30%',
+    },
+    '& > button > *': {
+      textAlign: 'center',
+    },
+  },
+  disabledButton: {
+    color: `${theme.palette.primary.contrastText}!important`,
+  },
+});
diff --git a/packages/geoview-core/src/ui/stepper/custom-stepper.tsx b/packages/geoview-core/src/ui/stepper/custom-stepper.tsx
index d5e981f7533..e52a2deb527 100644
--- a/packages/geoview-core/src/ui/stepper/custom-stepper.tsx
+++ b/packages/geoview-core/src/ui/stepper/custom-stepper.tsx
@@ -1,13 +1,12 @@
 /* eslint-disable react/require-default-props */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { useState, CSSProperties } from 'react';
-import { Box, Stepper as MaterialStepper, Step, StepButton, StepContent, StepLabel, Typography } from '@mui/material';
-
-import makeStyles from '@mui/styles/makeStyles';
+import { Box, Stepper as MaterialStepper, Step, StepButton, StepContent, StepLabel, Typography, useTheme } from '@mui/material';
 
 import { Button } from '../button/button';
 
 import { HtmlToReact } from '@/core/containers/html-to-react';
+import { getSxClasses } from './custom-stepper-style';
 
 /**
  * Properties for the Custom Stepper
@@ -57,43 +56,6 @@ export interface TypeStepperSteps {
   disableStepMovement?: boolean;
 }
 
-const useStyles = makeStyles((theme) => ({
-  stepperContainer: {
-    padding: 15,
-    width: 500,
-    minWidth: 150,
-    border: '0.5px solid grey',
-    flexWrap: 'wrap',
-    '& .MuiSvgIcon-root.Mui-active': {
-      color: '#90caf9',
-    },
-    '& .MuiSvgIcon-root.Mui-completed': {
-      color: '#666666',
-    },
-  },
-  actionContainer: {
-    marginTop: 20,
-    width: '100%',
-    display: 'flex',
-    flexWrap: 'wrap',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    '&>*:first-child': {
-      width: '100%',
-      marginBottom: 8,
-    },
-    '& > button': {
-      width: '30%',
-    },
-    '& > button > *': {
-      textAlign: 'center',
-    },
-  },
-  disabledButton: {
-    color: `${theme.palette.primary.contrastText}!important`,
-  },
-}));
-
 /**
  * Create a customizable Material UI Stepper
  *
@@ -104,7 +66,10 @@ export function CustomStepper(props: TypeCustomStepperProps): JSX.Element {
   const [activeStep, setActiveStep] = useState(0);
   const [completed, setCompleted] = useState<any>({});
   const [isReset, setIsReset] = useState<any>(false);
-  const classes = useStyles();
+
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
+
   const {
     className,
     style,
@@ -217,7 +182,7 @@ export function CustomStepper(props: TypeCustomStepperProps): JSX.Element {
   return (
     <Box>
       <MaterialStepper
-        className={`${classes.stepperContainer} ${className && className}`}
+        className={`${sxClasses.stepperContainer} ${className && className}`}
         style={style || undefined}
         id={stepperId || ''}
         orientation={stepsOrientation}
@@ -245,16 +210,16 @@ export function CustomStepper(props: TypeCustomStepperProps): JSX.Element {
             </Step>
           );
         })}
-        <Box className={classes.actionContainer}>
+        <Box sx={sxClasses.actionContainer}>
           <>
             <Typography>{isReset ? 'Steps Completed' : `Step ${activeStep + 1}`}</Typography>
             {!isReset && (
               <>
-                <Button type="text" disabled={activeStep < 1} className={activeStep < 1 ? classes.disabledButton : ''} onClick={handleBack}>
+                <Button type="text" disabled={activeStep < 1} sx={activeStep < 1 ? sxClasses.disabledButton : {}} onClick={handleBack}>
                   {backButtonText || 'Back'}
                 </Button>
 
-                <Button type="text" onClick={handleNext} disabled={stepIsDisabled} className={stepIsDisabled ? classes.disabledButton : ''}>
+                <Button type="text" onClick={handleNext} disabled={stepIsDisabled} sx={stepIsDisabled ? sxClasses.disabledButton : {}}>
                   {nextButtonText || 'Next'}
                 </Button>
 
diff --git a/packages/geoview-core/src/ui/stepper/stepper-style.ts b/packages/geoview-core/src/ui/stepper/stepper-style.ts
new file mode 100644
index 00000000000..30b1a49e247
--- /dev/null
+++ b/packages/geoview-core/src/ui/stepper/stepper-style.ts
@@ -0,0 +1,7 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  stepper: {
+    color: theme.palette.text.primary,
+  },
+});
diff --git a/packages/geoview-core/src/ui/stepper/stepper.tsx b/packages/geoview-core/src/ui/stepper/stepper.tsx
index e280e62ebb9..5391c3098e0 100644
--- a/packages/geoview-core/src/ui/stepper/stepper.tsx
+++ b/packages/geoview-core/src/ui/stepper/stepper.tsx
@@ -7,15 +7,9 @@ import {
   StepLabelProps,
   StepContentProps,
   StepProps,
+  useTheme,
 } from '@mui/material';
-
-import makeStyles from '@mui/styles/makeStyles';
-
-const useStyles = makeStyles((theme) => ({
-  stepper: {
-    color: theme.palette.text.primary,
-  },
-}));
+import { getSxClasses } from './stepper-style';
 
 /**
  * Custom MUI Stepper Props
@@ -44,9 +38,12 @@ interface TypeStep {
  */
 export function Stepper(props: TypeStepperProps): JSX.Element {
   const { steps, ...stepperProps } = props;
-  const classes = useStyles();
+
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
+
   return (
-    <MaterialStepper className={classes.stepper} {...stepperProps}>
+    <MaterialStepper sx={sxClasses.stepper} {...stepperProps}>
       {steps &&
         steps.map((step: TypeStep | null, index) => {
           if (step) {
diff --git a/packages/geoview-core/src/ui/switch/switch-style.ts b/packages/geoview-core/src/ui/switch/switch-style.ts
new file mode 100644
index 00000000000..b98f5554fc4
--- /dev/null
+++ b/packages/geoview-core/src/ui/switch/switch-style.ts
@@ -0,0 +1,18 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  formControl: {
+    width: '100%',
+    marginRight: '5px',
+    marginLeft: '5px',
+    '& .MuiSwitch-switchBase.Mui-focusVisible': {
+      color: theme.palette.primary.contrastText,
+      background: theme.palette.primary.light,
+    },
+    '& .MuiFormControlLabel-label': {
+      fontSize: theme.typography.fontSize,
+      color: theme.palette.primary.light,
+      whiteSpace: 'nowrap',
+    },
+  },
+});
diff --git a/packages/geoview-core/src/ui/switch/switch.tsx b/packages/geoview-core/src/ui/switch/switch.tsx
index 67dd82503aa..6e97521e00c 100644
--- a/packages/geoview-core/src/ui/switch/switch.tsx
+++ b/packages/geoview-core/src/ui/switch/switch.tsx
@@ -1,6 +1,5 @@
-import { FormControlLabel as MaterialFormControlLabel, Switch as MaterialSwitch, SwitchProps } from '@mui/material';
-
-import makeStyles from '@mui/styles/makeStyles';
+import { FormControlLabel as MaterialFormControlLabel, Switch as MaterialSwitch, SwitchProps, useTheme } from '@mui/material';
+import { getSxClasses } from './switch-style';
 
 /**
  * Custom Material UI Switch properties
@@ -8,23 +7,6 @@ import makeStyles from '@mui/styles/makeStyles';
 // eslint-disable-next-line react/require-default-props
 export type TypeSwitchProps = SwitchProps & { mapId?: string };
 
-const useStyles = makeStyles((theme) => ({
-  formControl: {
-    width: '100%',
-    marginRight: '5px',
-    marginLeft: '5px',
-    '& .MuiSwitch-switchBase.Mui-focusVisible': {
-      color: theme.palette.primary.contrastText,
-      background: theme.palette.primary.light,
-    },
-    '& .MuiFormControlLabel-label': {
-      fontSize: theme.typography.fontSize,
-      color: theme.palette.primary.light,
-      whiteSpace: 'nowrap',
-    },
-  },
-}));
-
 /**
  * Create a Material UI Swich component
  *
@@ -32,9 +14,10 @@ const useStyles = makeStyles((theme) => ({
  * @returns {JSX.Element} the switch ui component
  */
 export function Switch(props: TypeSwitchProps): JSX.Element {
-  const classes = useStyles();
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
 
   const { title, ...otherProps } = props;
 
-  return <MaterialFormControlLabel control={<MaterialSwitch {...otherProps} />} label={title} className={classes.formControl} />;
+  return <MaterialFormControlLabel control={<MaterialSwitch {...otherProps} />} label={title} sx={sxClasses.formControl} />;
 }
diff --git a/packages/geoview-core/src/ui/tabs/tabs.tsx b/packages/geoview-core/src/ui/tabs/tabs.tsx
index 93f4657ddbf..52ee0201dd4 100644
--- a/packages/geoview-core/src/ui/tabs/tabs.tsx
+++ b/packages/geoview-core/src/ui/tabs/tabs.tsx
@@ -17,6 +17,7 @@ export type TypeTabs = {
   value: number;
   label: string;
   content: TypeChildren | string;
+  icon?: JSX.Element;
 };
 
 /**
@@ -88,17 +89,24 @@ export function Tabs(props: TypeTabsProps): JSX.Element {
               <MaterialTab
                 label={tab.label}
                 key={index}
+                icon={tab.icon}
+                iconPosition="start"
                 {...props.tabProps}
                 id={`tab-${index}`}
                 onClick={() => handleClick(index)}
                 sx={{
                   fontSize: 16,
+                  fontWeight: 'bold',
                   minWidth: 'min(4vw, 24px)',
                   padding: '16px 2%',
                   textTransform: 'capitalize',
                   '&.Mui-selected': {
                     color: 'secondary.main',
                   },
+                  '.MuiTab-iconWrapper': {
+                    marginRight: '7px',
+                    maxWidth: '18px',
+                  },
                 }}
               />
             );
diff --git a/packages/geoview-core/src/ui/text-field/custom-text-field-style.ts b/packages/geoview-core/src/ui/text-field/custom-text-field-style.ts
new file mode 100644
index 00000000000..418f533aa15
--- /dev/null
+++ b/packages/geoview-core/src/ui/text-field/custom-text-field-style.ts
@@ -0,0 +1,15 @@
+import { Theme } from '@mui/material/styles';
+
+export const getSxClasses = (theme: Theme) => ({
+  textField: {
+    width: '50%',
+    margin: '10px 0',
+    '& .MuiFormLabel-root.Mui-focused': {
+      color: theme.palette.primary.contrastText,
+      background: theme.palette.primary.light,
+    },
+    '& .MuiOutlinedInput-root.Mui-focused': {
+      border: `1px solid ${theme.palette.primary.contrastText}`,
+    },
+  },
+});
diff --git a/packages/geoview-core/src/ui/text-field/custom-text-field.tsx b/packages/geoview-core/src/ui/text-field/custom-text-field.tsx
index 41f86868827..d8410ec1155 100644
--- a/packages/geoview-core/src/ui/text-field/custom-text-field.tsx
+++ b/packages/geoview-core/src/ui/text-field/custom-text-field.tsx
@@ -2,9 +2,8 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import React, { ReactNode } from 'react';
 
-import makeStyles from '@mui/styles/makeStyles';
-
-import { BaseTextFieldProps, InputAdornment, TextField as MaterialTextField } from '@mui/material';
+import { BaseTextFieldProps, InputAdornment, TextField as MaterialTextField, useTheme } from '@mui/material';
+import { getSxClasses } from './custom-text-field-style';
 
 /**
  * Customized Material UI Custom TextField Properties
@@ -25,20 +24,6 @@ interface TypeCustomTextFieldProps extends Omit<BaseTextFieldProps, 'prefix'> {
   changeHandler?: <T>(params: T) => void;
 }
 
-const useStyles = makeStyles((theme) => ({
-  textField: {
-    width: '50%',
-    margin: '10px 0',
-    '& .MuiFormLabel-root.Mui-focused': {
-      color: theme.palette.primary.contrastText,
-      background: theme.palette.primary.light,
-    },
-    '& .MuiOutlinedInput-root.Mui-focused': {
-      border: `1px solid ${theme.palette.primary.contrastText}`,
-    },
-  },
-}));
-
 /**
  * Create a customizable Material UI TextField
  *
@@ -46,7 +31,8 @@ const useStyles = makeStyles((theme) => ({
  * @returns {JSX.Element} the created TextField element
  */
 export function CustomTextField(props: TypeCustomTextFieldProps): JSX.Element {
-  const classes = useStyles();
+  const theme = useTheme();
+  const sxClasses = getSxClasses(theme);
 
   const {
     className,
@@ -65,7 +51,8 @@ export function CustomTextField(props: TypeCustomTextFieldProps): JSX.Element {
 
   return (
     <MaterialTextField
-      className={`${classes.textField} ${className && className}`}
+      sx={sxClasses.textField}
+      className={`${className && className}`}
       style={style}
       value={defaultValue ? undefined : value}
       onChange={changeHandler}
diff --git a/packages/geoview-footer-panel/default-config-footer-panel.json b/packages/geoview-footer-panel/default-config-footer-panel.json
index e59945b1c00..7e61425e989 100644
--- a/packages/geoview-footer-panel/default-config-footer-panel.json
+++ b/packages/geoview-footer-panel/default-config-footer-panel.json
@@ -2,6 +2,7 @@
   "tabs": {
     "defaultTabs": [
       "legend",
+      "layers",
       "details",
       "data-table"
     ],
diff --git a/packages/geoview-footer-panel/schema.json b/packages/geoview-footer-panel/schema.json
index 03f5c6cb926..0f8eaa35a70 100644
--- a/packages/geoview-footer-panel/schema.json
+++ b/packages/geoview-footer-panel/schema.json
@@ -16,6 +16,7 @@
             "type": "string",
             "enum": [
               "legend",
+              "layers",
               "details",
               "data-table"
             ]
@@ -23,6 +24,7 @@
           "minItems": 0,
           "default": [
             "legend",
+            "layers",
             "details",
             "data-table"
           ],
diff --git a/packages/geoview-footer-panel/src/index.tsx b/packages/geoview-footer-panel/src/index.tsx
index 3b600b9c8f4..349d957d0fa 100644
--- a/packages/geoview-footer-panel/src/index.tsx
+++ b/packages/geoview-footer-panel/src/index.tsx
@@ -12,11 +12,13 @@ import {
   PayloadBaseClass,
 } from 'geoview-core';
 
+import { HubOutlinedIcon, InfoOutlinedIcon, LayersOutlinedIcon, StorageIcon } from 'geoview-core/src/ui';
 import schema from '../schema.json';
 import defaultConfig from '../default-config-footer-panel.json';
 import { DetailsItem } from './details-item';
 import { LegendItem } from './legend-item';
 import { DataTable } from './data-table';
+import { Layers } from './layers';
 
 const w = window as TypeWindow;
 
@@ -57,11 +59,13 @@ class FooterPanelPlugin extends AbstractPlugin {
   translations = toJsonObject({
     en: {
       legend: 'Legend',
+      layers: 'Layers',
       details: 'Details',
       dataTable: 'DataTable',
     },
     fr: {
       legend: 'Légende',
+      layers: 'Couches',
       details: 'Détails',
       dataTable: 'Données',
     },
@@ -92,6 +96,18 @@ class FooterPanelPlugin extends AbstractPlugin {
           value: tabsCounter,
           label: this.translations[displayLanguage].legend as string,
           content: () => <LegendItem mapId={mapId} />,
+          icon: <HubOutlinedIcon />,
+        });
+        tabsCounter++;
+      }
+      
+      if (defaultTabs.includes('layers')) {
+        // create new tab and add the LayersComponent to the footer tab
+        footerTabs.createFooterTab({
+          value: tabsCounter,
+          label: this.translations[displayLanguage].layers as string,
+          content: () => <Layers mapId={mapId} />,
+          icon: <LayersOutlinedIcon />,
         });
         tabsCounter++;
       }
@@ -104,6 +120,7 @@ class FooterPanelPlugin extends AbstractPlugin {
           value: detailsTabValue,
           label: this.translations[displayLanguage].details as string,
           content: () => <DetailsItem mapId={mapId} />,
+          icon: <InfoOutlinedIcon />,
         });
         tabsCounter++;
         // select the details tab when map click queries are done
@@ -131,6 +148,7 @@ class FooterPanelPlugin extends AbstractPlugin {
           value: tabsCounter,
           label: this.translations[displayLanguage].dataTable as string,
           content: () => <DataTable mapId={mapId} />,
+          icon: <StorageIcon />,
         });
         tabsCounter++;
       }
diff --git a/packages/geoview-footer-panel/src/layers.tsx b/packages/geoview-footer-panel/src/layers.tsx
new file mode 100644
index 00000000000..8afd8d809f2
--- /dev/null
+++ b/packages/geoview-footer-panel/src/layers.tsx
@@ -0,0 +1,71 @@
+/* eslint-disable react/require-default-props */
+import type React from 'react';
+import { TypeWindow, payloadIsALayerConfig, payloadIsRemoveGeoViewLayer } from 'geoview-core';
+import { LayerConfigPayload, PayloadBaseClass, TypeRemoveGeoviewLayerPayload } from 'geoview-core/src/api/events/payloads';
+
+interface Props {
+  mapId: string;
+}
+const w = window as TypeWindow;
+
+/**
+ * Create an element that displays the layers component
+ *
+ * @returns {JSX.Element} created layers component
+ */
+export function Layers({ mapId }: Props): JSX.Element {
+  const { cgpv } = w;
+  const { api, react } = cgpv;
+
+  const { useState, useEffect } = react;
+
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  const [layers, setLayers] = useState<React.DetailedReactHTMLElement<{}, HTMLElement>>();
+  const [mapLayers, setMapLayers] = useState<string[]>([]);
+
+  const updateLayers = () => {
+    if (api.maps[mapId].layer?.layerOrder !== undefined) setMapLayers([...api.maps[mapId].layer.layerOrder].reverse());
+  };
+
+  const eventMapLoadedListenerFunction = () => updateLayers();
+  const eventRemoveLayerListenerFunction = (payload: PayloadBaseClass) => {
+    if (payloadIsRemoveGeoViewLayer(payload)) {
+      setMapLayers((orderedLayers) =>
+        orderedLayers.filter((layerId) => layerId !== (payload as TypeRemoveGeoviewLayerPayload).geoviewLayer.geoviewLayerId)
+      );
+    }
+  };
+
+  const eventAddLayerListenerFunction = (payload: PayloadBaseClass) => {
+    if (payloadIsALayerConfig(payload)) {
+      api.event.on(
+        api.eventNames.LAYER.EVENT_LAYER_ADDED,
+        () => {
+          updateLayers();
+          api.event.off(api.eventNames.LAYER.EVENT_LAYER_ADDED, `${mapId}/${(payload as LayerConfigPayload).layerConfig.geoviewLayerId}`);
+        },
+        `${mapId}/${(payload as LayerConfigPayload).layerConfig.geoviewLayerId}`
+      );
+    }
+  };
+
+  useEffect(() => {
+    api.event.on(api.eventNames.MAP.EVENT_MAP_LOADED, eventMapLoadedListenerFunction, mapId);
+    api.event.on(api.eventNames.LAYER.EVENT_REMOVE_LAYER, eventRemoveLayerListenerFunction, mapId);
+    api.event.on(api.eventNames.LAYER.EVENT_ADD_LAYER, eventAddLayerListenerFunction, mapId);
+
+    return () => {
+      api.event.off(api.eventNames.MAP.EVENT_MAP_LOADED, mapId, eventMapLoadedListenerFunction);
+      api.event.off(api.eventNames.LAYER.EVENT_REMOVE_LAYER, mapId, eventRemoveLayerListenerFunction);
+      api.event.off(api.eventNames.LAYER.EVENT_ADD_LAYER, mapId, eventAddLayerListenerFunction);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    setLayers(api.maps[mapId].layers.createLayers({ layerIds: mapLayers, isRemoveable: false, canSetOpacity: true, canZoomTo: true }));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mapLayers]);
+
+  return <div>{layers}</div>;
+}
diff --git a/packages/geoview-layers-panel/src/layer-stepper.tsx b/packages/geoview-layers-panel/src/layer-stepper.tsx
index a952ce21c5c..f1bf6ce0daf 100644
--- a/packages/geoview-layers-panel/src/layer-stepper.tsx
+++ b/packages/geoview-layers-panel/src/layer-stepper.tsx
@@ -375,7 +375,7 @@ function LayerStepper({ mapId, setAddLayerVisible }: Props): JSX.Element {
    *
    * @returns {Promise<boolean>} True if layer passes validation
    */
-  const geocoreValidation = async (): Promise<boolean> => {
+  const geocoreValidation = (): boolean => {
     try {
       const isValid = layerURL.indexOf('/') === -1 && layerURL.replaceAll('-', '').length === 32;
       if (!isValid) throw new Error('err');
@@ -580,7 +580,7 @@ function LayerStepper({ mapId, setAddLayerVisible }: Props): JSX.Element {
     else if (layerType === ESRI_FEATURE) valid = await esriValidation(ESRI_FEATURE);
     else if (layerType === GEOJSON) valid = await geoJSONValidation();
     else if (layerType === GEOPACKAGE) valid = geoPackageValidation();
-    else if (layerType === GEOCORE) valid = await geocoreValidation();
+    else if (layerType === GEOCORE) valid = geocoreValidation();
     if (valid) {
       setIsLoading(false);
       setActiveStep(2);
diff --git a/packages/geoview-layers-panel/src/layers-list.style.ts b/packages/geoview-layers-panel/src/layers-list.style.ts
new file mode 100644
index 00000000000..91aea1aa209
--- /dev/null
+++ b/packages/geoview-layers-panel/src/layers-list.style.ts
@@ -0,0 +1,66 @@
+export const sxClasses = {
+  layersContainer: {
+    overflow: 'hidden',
+    overflowY: 'auto',
+    width: '100%',
+  },
+  layerItem: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    margin: '5px 0',
+    padding: '10px 5px',
+    boxSizing: 'content-box',
+    '&:hover': {
+      cursor: 'pointer',
+      backgroundColor: '#c9c9c9',
+    },
+    zIndex: 1000,
+    border: 'none',
+    width: '100%',
+  },
+  layerParentText: {
+    fontSize: '16px',
+    fontWeight: 'bold',
+  },
+  layerCountTextContainer: {
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    height: '32px',
+  },
+  layerItemText: {
+    fontSize: '14px',
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    marginLeft: '10px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: 6,
+  },
+  flexGroup: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    alignItems: 'baseline',
+    gap: 12,
+  },
+  flexGroupButton: {
+    height: 38,
+    minHeight: 38,
+    width: 25,
+    minWidth: 25,
+    '& > div': {
+      textAlign: 'center',
+    },
+  },
+  slider: {
+    width: '100%',
+    paddingLeft: 20,
+    paddingRight: 20,
+  },
+  legendSubLayerGroup: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+};
diff --git a/packages/geoview-layers-panel/src/layers-list.tsx b/packages/geoview-layers-panel/src/layers-list.tsx
index 5cae2b5eb45..dc275b13669 100644
--- a/packages/geoview-layers-panel/src/layers-list.tsx
+++ b/packages/geoview-layers-panel/src/layers-list.tsx
@@ -12,6 +12,7 @@ import {
   getLocalizedValue,
 } from 'geoview-core';
 
+import { sxClasses } from './layers-list.style';
 /**
  * interface for the layers list properties in layers panel
  */
@@ -52,7 +53,7 @@ function LayersList(props: TypeLayersPanelListProps): JSX.Element {
   const [layerVisibility, setLayerVisibility] = useState<Record<string, boolean>>({});
   const [subLayerVisibility, setSubLayerVisibility] = useState<TypeSubLayerVisibility>({});
 
-  const { Button, Slider, Tooltip, Checkbox } = ui.elements;
+  const { Button, Slider, Tooltip, Checkbox, Box } = ui.elements;
 
   const translations: TypeJsonObject = toJsonObject({
     en: {
@@ -71,73 +72,6 @@ function LayersList(props: TypeLayersPanelListProps): JSX.Element {
     },
   });
 
-  const useStyles = ui.makeStyles(() => ({
-    layersContainer: {
-      overflow: 'hidden',
-      overflowY: 'auto',
-      width: '100%',
-    },
-    layerItem: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      margin: '5px 0',
-      padding: '10px 5px',
-      boxSizing: 'content-box',
-      '&:hover': {
-        cursor: 'pointer',
-        backgroundColor: '#c9c9c9',
-      },
-      zIndex: 1000,
-      border: 'none',
-      width: '100%',
-    },
-    layerParentText: {
-      fontSize: '16px',
-      fontWeight: 'bold',
-    },
-    layerCountTextContainer: {
-      display: 'flex',
-      alignItems: 'center',
-      width: '100%',
-      height: '32px',
-    },
-    layerItemText: {
-      fontSize: '14px',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis',
-      overflow: 'hidden',
-      marginLeft: '10px',
-      display: 'flex',
-      alignItems: 'center',
-      gap: 6,
-    },
-    flexGroup: {
-      display: 'flex',
-      justifyContent: 'flex-end',
-      alignItems: 'baseline',
-      gap: 12,
-    },
-    flexGroupButton: {
-      height: 38,
-      minHeight: 38,
-      width: 25,
-      minWidth: 25,
-      '& > div': {
-        textAlign: 'center',
-      },
-    },
-    slider: {
-      width: '100%',
-      paddingLeft: 20,
-      paddingRight: 20,
-    },
-    legendSubLayerGroup: {
-      display: 'flex',
-      justifyContent: 'space-between',
-    },
-  }));
-
   /**
    * Calls setLayerLegend for all layers
    */
@@ -189,8 +123,6 @@ function LayersList(props: TypeLayersPanelListProps): JSX.Element {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [layers]);
 
-  const classes = useStyles();
-
   /**
    * Sets the currently selected layer,
    * sets to blank if value is same as currently selecetd layer
@@ -349,21 +281,21 @@ function LayersList(props: TypeLayersPanelListProps): JSX.Element {
   };
 
   return (
-    <div className={classes.layersContainer}>
+    <Box sx={sxClasses.layersContainer}>
       {Object.values(layers).map((layer) => (
-        <div key={layer.geoviewLayerId}>
-          <button type="button" className={classes.layerItem} onClick={() => onClick(layer.geoviewLayerId)}>
-            <div className={classes.layerCountTextContainer}>
-              <div className={classes.layerItemText} title={layer.geoviewLayerName}>
+        <Box key={layer.geoviewLayerId}>
+          <Button type="text" sx={sxClasses.layerItem} onClick={() => onClick(layer.geoviewLayerId)} disableRipple>
+            <Box sx={sxClasses.layerCountTextContainer}>
+              <Box sx={sxClasses.layerItemText} title={layer.geoviewLayerName}>
                 {layer.geoviewLayerName}
-              </div>
-            </div>
-          </button>
+              </Box>
+            </Box>
+          </Button>
           {selectedLayer === layer.geoviewLayerId && (
             <>
-              <div className={classes.flexGroup}>
+              <Box sx={sxClasses.flexGroup}>
                 <Button
-                  className={classes.flexGroupButton}
+                  sx={sxClasses.flexGroupButton}
                   tooltip={translations[displayLanguage].zoom as string}
                   tooltipPlacement="top"
                   variant="contained"
@@ -372,7 +304,7 @@ function LayersList(props: TypeLayersPanelListProps): JSX.Element {
                   onClick={() => onZoom(layer)}
                 />
                 <Button
-                  className={classes.flexGroupButton}
+                  sx={sxClasses.flexGroupButton}
                   tooltip={translations[displayLanguage].bounds as string}
                   tooltipPlacement="top"
                   variant="contained"
@@ -381,7 +313,7 @@ function LayersList(props: TypeLayersPanelListProps): JSX.Element {
                   onClick={() => onBounds(layer)}
                 />
                 <Button
-                  className={classes.flexGroupButton}
+                  sx={sxClasses.flexGroupButton}
                   tooltip={translations[displayLanguage].remove as string}
                   tooltipPlacement="top"
                   variant="contained"
@@ -389,12 +321,12 @@ function LayersList(props: TypeLayersPanelListProps): JSX.Element {
                   icon='<i class="material-icons">remove</i>'
                   onClick={() => onRemove(layer)}
                 />
-              </div>
-              <div className={classes.flexGroup}>
+              </Box>
+              <Box sx={sxClasses.flexGroup}>
                 <Tooltip title={translations[displayLanguage].opacity as string}>
                   <i className="material-icons">contrast</i>
                 </Tooltip>
-                <div className={classes.slider}>
+                <Box sx={sxClasses.slider}>
                   <Slider
                     sliderId={api.generateId()}
                     min={0}
@@ -404,63 +336,63 @@ function LayersList(props: TypeLayersPanelListProps): JSX.Element {
                     valueLabelDisplay="auto"
                     customOnChange={(value) => onSliderChange(value as number, layer)}
                   />
-                </div>
+                </Box>
                 <Tooltip title={translations[displayLanguage].visibility as string}>
                   <Checkbox checked={layerVisibility[layer.geoviewLayerId]} onChange={(e) => onVisibilityChange(e.target.checked, layer)} />
                 </Tooltip>
-              </div>
+              </Box>
               {(layerLegend[layer.geoviewLayerId] as TypeJsonArray).map((subLayer, index: number) => (
-                <div key={index}>
+                <Box key={index}>
                   {subLayer!.legend && (
-                    <div className={classes.legendSubLayerGroup}>
-                      <div className={classes.layerItemText} title={subLayer.layerName as string}>
+                    <Box sx={sxClasses.legendSubLayerGroup}>
+                      <Box sx={sxClasses.layerItemText} title={subLayer.layerName as string}>
                         {subLayer.layerName as string}
-                      </div>
+                      </Box>
                       <Tooltip title={translations[displayLanguage].visibility as string}>
                         <Checkbox
                           checked={subLayerVisibility[layer.geoviewLayerId].includes(subLayer.layerId as number)}
                           onChange={(e) => onSubVisibilityChange(e.target.checked, layer, subLayer.layerId as number)}
                         />
                       </Tooltip>
-                    </div>
+                    </Box>
                   )}
                   {(subLayer.drawingInfo?.renderer.type as string) === 'simple' && subLayer.drawingInfo?.renderer.symbol.imageData && (
-                    <div className={classes.layerItemText}>
+                    <Box sx={sxClasses.layerItemText}>
                       <img
                         alt="Layer Legend"
                         src={`data:${subLayer.drawingInfo?.renderer.symbol.contentType};base64,${subLayer.drawingInfo?.renderer.symbol.imageData}`}
                       />
                       {(subLayer.drawingInfo?.renderer.label || subLayer.name) as string}
-                    </div>
+                    </Box>
                   )}
                   {subLayer.drawingInfo?.renderer.type === 'uniqueValue' &&
                     subLayer.drawingInfo.renderer.uniqueValueInfos[0].symbol.imageData &&
                     (subLayer.drawingInfo.renderer.uniqueValueInfos as TypeJsonArray).map((uniqueValue, i: number) => (
-                      <div key={i} className={classes.layerItemText}>
+                      <Box key={i} sx={sxClasses.layerItemText}>
                         <img alt="Layer Legend" src={`data:${uniqueValue.symbol.contentType};base64,${uniqueValue.symbol.imageData}`} />
                         {uniqueValue.label as string}
-                      </div>
+                      </Box>
                     ))}
                   {subLayer.legend &&
                     (subLayer.legend as TypeJsonArray).map((uniqueValue, i: number) => (
-                      <div key={i} className={classes.layerItemText}>
+                      <Box key={i} sx={sxClasses.layerItemText}>
                         <img alt="Layer Legend" src={`data:${uniqueValue.contentType};base64,${uniqueValue.imageData}`} />
                         {(uniqueValue.label || subLayer.layerName) as string}
-                      </div>
+                      </Box>
                     ))}
                   {subLayer.dataUrl && (
-                    <div className={classes.layerItemText}>
+                    <Box sx={sxClasses.layerItemText}>
                       <img alt="Layer Legend" src={subLayer.dataUrl as string} />
                       {subLayer.name as string}
-                    </div>
+                    </Box>
                   )}
-                </div>
+                </Box>
               ))}
             </>
           )}
-        </div>
+        </Box>
       ))}
-    </div>
+    </Box>
   );
 }