diff --git a/packages/geoview-core/public/locales/en/translation.json b/packages/geoview-core/public/locales/en/translation.json
index a201278db37..8f830fee76f 100644
--- a/packages/geoview-core/public/locales/en/translation.json
+++ b/packages/geoview-core/public/locales/en/translation.json
@@ -111,6 +111,7 @@
     "toggleVisibility": "Toggle visibility",
     "toggleCollapse": "Toggle collapse",
     "querying": "Querying",
+    "layerAdded": "Layer __param__ added",
     "instructionsNoLayersTitle": "No layers visible",
     "instructionsNoLayersBody": "Add visible layers on the map."
   },
diff --git a/packages/geoview-core/public/locales/fr/translation.json b/packages/geoview-core/public/locales/fr/translation.json
index ada84c8a702..e2c407ec772 100644
--- a/packages/geoview-core/public/locales/fr/translation.json
+++ b/packages/geoview-core/public/locales/fr/translation.json
@@ -111,6 +111,7 @@
     "toggleVisibility": "Basculer la visibilité",
     "toggleCollapse": "Basculer la fermeture",
     "querying": "Requête en cours",
+    "layerAdded": "Couche __param__  ajoutée",
     "instructionsNoLayersTitle": "Aucune couche visible",
     "instructionsNoLayersBody": "Ajoutez des couches visibles sur la carte."
   },
diff --git a/packages/geoview-core/public/templates/raw-feature-info.html b/packages/geoview-core/public/templates/raw-feature-info.html
index dc305f48c0b..dbf2848ccf5 100644
--- a/packages/geoview-core/public/templates/raw-feature-info.html
+++ b/packages/geoview-core/public/templates/raw-feature-info.html
@@ -316,6 +316,140 @@ <h4 id="HUC2">2. Basic Map French Dark theme</h4>
     ></div>
     <hr />
 
+    <div class="map-title-holder">
+      <h4 id="HUC3">2. Basic Map English Light theme</h4>
+      <a class="ref-link" href="#top">Top</a>
+    </div>
+    <div
+      id="mapWM3"
+      class="geoview-map"
+      data-lang="en"
+      data-config="{
+        'map': {
+          'interaction': 'dynamic',
+          'viewSettings': {
+            'zoom': 3,
+            'center': [-100, 50],
+            'projection': 3978
+          },
+          'basemapOptions': {
+            'basemapId': 'osm',
+            'shaded': false,
+            'labeled': false
+          },
+          'listOfGeoviewLayerConfig': [
+            {
+              'geoviewLayerId': 'esriFeatureLYR4',
+              'geoviewLayerName': {
+                'en': 'Water quality at monitoring sites',
+                'fr': 'Qualite de eau'
+              },
+              'metadataAccessPath': {
+                'en': 'https://maps-cartes.ec.gc.ca/arcgis/rest/services/DMS/DEU_CSO_Volume/MapServer',
+                'fr': 'https://maps-cartes.ec.gc.ca/arcgis/rest/services/DMS/DEU_CSO_Volume/MapServer'
+              },
+              'geoviewLayerType': 'esriFeature',
+              'initialSettings': { 'visible': 'always' },
+              'listOfLayerEntryConfig': [
+                {
+                  'layerId': '8'
+                }
+              ]
+            },
+            {
+              'geoviewLayerId': 'uniqueValueId',
+              'geoviewLayerName': { 'en': 'uniqueValue', 'fr': 'uniqueValue' },
+              'metadataAccessPath': { 'en': 'https://maps-cartes.ec.gc.ca/arcgis/rest/services/CESI/MapServer/', 'fr': 'https://maps-cartes.ec.gc.ca/arcgis/rest/services/CESI/MapServer/' },
+              'geoviewLayerType': 'esriFeature',
+              'listOfLayerEntryConfig': [
+                {
+                  'layerId': '1'
+                }
+              ]
+            },
+            {
+              'geoviewLayerId': 'esriFeatureLYR5',
+              'geoviewLayerName': {
+                'en': 'Top Projects',
+                'fr': 'Projets super'
+              },
+              'metadataAccessPath': {
+                'en': 'https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/900A_and_top_100_en/MapServer/',
+                'fr': 'https://maps-cartes.services.geo.ca/server_serveur/rest/services/NRCan/900A_and_top_100_en/MapServer/'
+              },
+              'geoviewLayerType': 'esriFeature',
+              'listOfLayerEntryConfig': [
+                {
+                  'layerId': '0'
+                }
+              ]
+            },
+            {
+              'geoviewLayerId': 'geojsonLYR1',
+              'geoviewLayerName': { 'en': 'GeoJSON Sample', 'fr': 'GeoJSON Échantillon' },
+              'metadataAccessPath': { 'en': './geojson/metadata.json', 'fr': './geojson/metadata.json' },
+              'geoviewLayerType': 'GeoJSON',
+              'listOfLayerEntryConfig': [
+                {
+                  'layerId': 'polygons.json',
+                  'layerName': { 'en': 'Polygons', 'fr': 'Polygones' }
+                },
+                {
+                  'layerId': 'lines.json',
+                  'layerName': { 'en': 'Lines', 'fr': 'Lignes' }
+                },
+                {
+                  'entryType': 'group',
+                  'layerId': 'point-feature-group',
+                  'layerName': { 'en': 'point-feature-group', 'fr': 'point-feature-group' },
+                  'listOfLayerEntryConfig': [
+                    {
+                      'layerId': 'icon_points.json',
+                      'layerName': { 'en': 'Icons', 'fr': 'Icones' },
+                      'initialSettings': { 'visible': 'yes' }
+                    },
+                    {
+                      'layerId': 'points.json',
+                      'layerName': { 'en': 'Points', 'fr': 'Points' }
+                    },
+                    {
+                      'layerId': 'points_1.json',
+                      'layerName': { 'en': 'Points 1', 'fr': 'Points 1' }
+                    },
+                    {
+                      'layerId': 'points_2.json',
+                      'layerName': { 'en': 'Points 2', 'fr': 'Points 2' }
+                    },
+                    {
+                      'layerId': 'points_3.json',
+                      'layerName': { 'en': 'Points 3', 'fr': 'Points 3' }
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        },
+      'theme': 'light',
+      'appBar': {
+        'tabs': {
+          'core': ['geolocator', 'export']
+        }
+      },
+      'navBar': ['zoom', 'fullscreen', 'home', 'location', 'export'],
+      'footerBar': {
+        'tabs': {
+          'core': ['legend', 'layers', 'details', 'data-table']
+        }
+      },
+      'components': ['north-arrow'],
+      'corePackages': [],
+      'externalPackages': [],
+      'suportedLanguages': ['en', 'fr']
+    }"
+    ></div>
+    <hr />
+
     <script src="codedoc.js"></script>
     <script>
       // initialize cgpv and api events, a callback is optional, used if calling api's after the rendering is ready
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 0ce7d9124a2..e4d9187293c 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
@@ -184,7 +184,7 @@ export function Appbar(): JSX.Element {
           <Box>
             <List sx={sxClasses.appBarList}>
               <ListItem>
-                <ExportButton className={`${sxClasses.appBarButton} ${activeModalId ? 'export' : ''}`} />
+                <ExportButton className={` ${activeModalId ? 'export' : ''}`} />
               </ListItem>
             </List>
           </Box>
diff --git a/packages/geoview-core/src/core/components/common/enlarge-button.tsx b/packages/geoview-core/src/core/components/common/enlarge-button.tsx
index 201f7a3dedd..5ce3e95220f 100644
--- a/packages/geoview-core/src/core/components/common/enlarge-button.tsx
+++ b/packages/geoview-core/src/core/components/common/enlarge-button.tsx
@@ -1,8 +1,6 @@
 import { Dispatch } from 'react';
-import { useTheme } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
 import { ArrowBackIcon, ArrowForwardIcon, Button } from '@/ui';
-import { getSxClasses } from './enlarge-button-style';
 
 interface EnlargeButtonProps {
   isEnlarged: boolean;
@@ -18,19 +16,18 @@ interface EnlargeButtonProps {
 export function EnlargeButton({ isEnlarged, onSetIsEnlarged }: EnlargeButtonProps) {
   const { t } = useTranslation<string>();
 
-  const theme = useTheme();
-  const sxClasses = getSxClasses(theme);
-
   return (
     <Button
       type="text"
       size="small"
-      sx={sxClasses.enlargeBtn}
+      color="primary"
+      variant="contained"
+      startIcon={isEnlarged ? <ArrowForwardIcon /> : <ArrowBackIcon />}
+      sx={{ height: '40px', borderRadius: '1.5rem' }}
       onClick={() => onSetIsEnlarged(!isEnlarged)}
       tooltip={isEnlarged ? t('dataTable.reduceBtn')! : t('dataTable.enlargeBtn')!}
       tooltipPlacement="top"
     >
-      {isEnlarged ? <ArrowForwardIcon sx={sxClasses.enlargeBtnIcon} /> : <ArrowBackIcon sx={sxClasses.enlargeBtnIcon} />}
       {isEnlarged ? t('dataTable.reduceBtn') : t('dataTable.enlargeBtn')}
     </Button>
   );
diff --git a/packages/geoview-core/src/core/components/data-table/data-table.tsx b/packages/geoview-core/src/core/components/data-table/data-table.tsx
index fa56d40e436..64458c1f899 100644
--- a/packages/geoview-core/src/core/components/data-table/data-table.tsx
+++ b/packages/geoview-core/src/core/components/data-table/data-table.tsx
@@ -444,7 +444,7 @@ function DataTable({ data, layerPath, tableHeight = 600 }: DataTableProps) {
       sx: (theme) => ({
         // stripe the rows, make odd rows a darker color
         '& tr:nth-of-type(odd) > td': {
-          backgroundColor: `${darken(theme.palette.background.default, 0.1)}`,
+          backgroundColor: theme.palette.geoViewColor.bgColor.darken(0.1),
         },
         '& tr:hover > td': {
           backgroundColor: theme.palette.secondary.light,
diff --git a/packages/geoview-core/src/core/components/details/details-style.ts b/packages/geoview-core/src/core/components/details/details-style.ts
index 7f428a87e14..f363c1a5ea7 100644
--- a/packages/geoview-core/src/core/components/details/details-style.ts
+++ b/packages/geoview-core/src/core/components/details/details-style.ts
@@ -20,7 +20,7 @@ export const getSxClasses = (theme: Theme) => ({
   rightPanelContainer: {
     border: `2px solid ${theme.palette.geoViewColor.primary.main}`,
     borderRadius: '5px',
-    backgroundColor: theme.palette.geoViewColor.white,
+    color: theme.palette.geoViewColor.textColor.main,
   },
   rightPanelBtnHolder: {
     marginTop: '20px',
@@ -44,6 +44,7 @@ export const getSxClasses = (theme: Theme) => ({
     objectFit: 'scale-down',
     width: '35px',
     height: '35px',
+    marginRight: '10px',
   },
   selectFeatureCheckbox: {
     color: theme.palette.geoViewColor.primary.main,
diff --git a/packages/geoview-core/src/core/components/details/feature-info-new.tsx b/packages/geoview-core/src/core/components/details/feature-info-new.tsx
index 79af48805b8..51004deb42f 100644
--- a/packages/geoview-core/src/core/components/details/feature-info-new.tsx
+++ b/packages/geoview-core/src/core/components/details/feature-info-new.tsx
@@ -110,11 +110,7 @@ export function FeatureInfo({ features, currentFeatureIndex }: TypeFeatureInfoPr
       >
         {/* Left box - feature icon and feature name */}
         <Box sx={sxClasses.flexBoxAlignCenter}>
-          <img
-            src={featureIconSrc}
-            alt={nameFieldValue}
-            style={{ ...theme.iconImage, marginRight: '5px', width: '35px', height: '35px' }}
-          />
+          <Box component="img" src={featureIconSrc} alt={nameFieldValue} sx={sxClasses.featureInfoSingleImage} />
           <Typography sx={{ display: 'inline-block' }} component="div">
             {nameFieldValue}
           </Typography>
diff --git a/packages/geoview-core/src/core/components/details/feature-info-table.tsx b/packages/geoview-core/src/core/components/details/feature-info-table.tsx
index a7c9c2a42ce..e2f6f7a2a90 100644
--- a/packages/geoview-core/src/core/components/details/feature-info-table.tsx
+++ b/packages/geoview-core/src/core/components/details/feature-info-table.tsx
@@ -125,7 +125,11 @@ export function FeatureInfoTable({ featureInfoList }: FeatureInfoTableProps): JS
         <Grid
           container
           spacing={5}
-          sx={{ backgroundColor: index % 2 > 0 ? theme.palette.geoViewColor.primary.main : '', marginBottom: '20px' }}
+          sx={{
+            backgroundColor: index % 2 > 0 ? theme.palette.geoViewColor.bgColor.darken(0.1) : '',
+            color: index % 2 > 0 ? theme.palette.geoViewColor.bgColor.darken(0.9) : '',
+            marginBottom: '20px',
+          }}
           key={index}
         >
           <Grid item xs="auto" sx={{ fontWeight: 'bold', width: '80% !important' }}>
diff --git a/packages/geoview-core/src/core/components/export/export-modal-button.tsx b/packages/geoview-core/src/core/components/export/export-modal-button.tsx
index 3cd0c7efd77..fc5738eb7ed 100644
--- a/packages/geoview-core/src/core/components/export/export-modal-button.tsx
+++ b/packages/geoview-core/src/core/components/export/export-modal-button.tsx
@@ -28,6 +28,7 @@ export default function ExportButton(props: ExportProps): JSX.Element {
       tooltipPlacement="bottom-end"
       onClick={() => openModal({ activeElementId: 'export', callbackElementId: `${mapId}-export-btn` })}
       className={className}
+      color="primary"
     >
       <DownloadIcon />
     </IconButton>
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 411ac4c73db..b7dc3fa583a 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
@@ -444,6 +444,7 @@ export function FooterBar(): JSX.Element | null {
             <IconButton
               onClick={handleDynamicFocus}
               tooltip={isFocusToMap ? 'footerBar.focusToMap' : 'footerBar.focusToFooter'}
+              color="primary"
               disabled={
                 isCollapsed || isMapFullScreen || footerPanelResizeValues[footerPanelResizeValues.length - 1] === footerPanelResizeValue
               }
diff --git a/packages/geoview-core/src/core/components/guide/guide-style.ts b/packages/geoview-core/src/core/components/guide/guide-style.ts
index 791d6f71c83..a4fd8de3e95 100644
--- a/packages/geoview-core/src/core/components/guide/guide-style.ts
+++ b/packages/geoview-core/src/core/components/guide/guide-style.ts
@@ -8,7 +8,8 @@ export const getSxClasses = (theme: Theme) => ({
   rightPanelContainer: {
     border: `2px solid ${theme.palette.primary.main}`,
     borderRadius: '5px',
-    backgroundColor: theme.palette.common.white,
+    backgroundColor: theme.palette.geoViewColor.bgColor.light[500],
+    color: theme.palette.geoViewColor.textColor.main,
   },
   footerGuideListItemText: {
     '&:hover': {
diff --git a/packages/geoview-core/src/core/components/layers/layer-icon.tsx b/packages/geoview-core/src/core/components/layers/layer-icon.tsx
index 1001478f543..ed9db3f8b43 100644
--- a/packages/geoview-core/src/core/components/layers/layer-icon.tsx
+++ b/packages/geoview-core/src/core/components/layers/layer-icon.tsx
@@ -10,7 +10,7 @@ export function LayerIcon({ layer }: LayerIconProps): JSX.Element {
   if (layer.layerStatus === 'error') {
     return <ErrorIcon color="error" />;
   }
-  if (layer.layerStatus === 'processing') {
+  if (layer.layerStatus === 'processing' || layer.layerStatus === 'loading') {
     return (
       <Box sx={{ padding: '5px', marginRight: '10px' }}>
         <CircularProgressBase size={20} />
diff --git a/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx
index bee120ce97a..134a6f86218 100644
--- a/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx
+++ b/packages/geoview-core/src/core/components/layers/left-panel/add-new-layer/add-new-layer.tsx
@@ -38,7 +38,7 @@ import { TypeCSVLayerConfig, TypeCsvLayerEntryConfig, CSV as CsvGeoviewClass } f
 import { ButtonPropsLayerPanel, SelectChangeEvent, TypeJsonArray, TypeJsonObject } from '@/core/types/global-types';
 import { useGeoViewMapId } from '@/core/stores/geoview-store';
 import { createLocalizedString } from '@/core/utils/utilities';
-import { useLayersList } from '@/core/stores/store-interface-and-intial-values/layer-state';
+import { useLayerStoreActions, useLayersList } from '@/core/stores/store-interface-and-intial-values/layer-state';
 import { Cast, Config, api, generateId } from '@/app';
 import { logger } from '@/core/utils/logger';
 import { EsriImage, TypeEsriImageLayerConfig } from '@/geo/layer/geoview-layers/raster/esri-image';
@@ -74,6 +74,7 @@ export function AddNewLayer(): JSX.Element {
   // get values from store
   const mapId = useGeoViewMapId();
   const layersList = useLayersList();
+  const { setDisplayState, setSelectedLayerPath } = useLayerStoreActions();
 
   const isMultiple = () => hasMetadata && (layerType === ESRI_DYNAMIC || layerType === WFS || layerType === WMS || layerType === GEOJSON);
 
@@ -865,6 +866,21 @@ export function AddNewLayer(): JSX.Element {
       } else emitErrorNotLoaded();
     }
     setIsLoading(false);
+    let message = '';
+    switch(geoviewLayerInstance?.layerPhase) {
+      case 'loading':
+        message = api.utilities.replaceParams([layerName], t('layers.layerAddedAndLoading'));
+        break;
+      case 'error':
+        message = api.utilities.replaceParams([layerName], t('layers.layerAddedWithError'));
+        break;
+      default:
+        setSelectedLayerPath(`${geoviewLayerInstance?.geoviewLayerId}/${geoviewLayerInstance?.geoviewLayerId}`);
+        message = api.utilities.replaceParams([layerName], t('layers.layerAdded'));
+        break;
+    }
+    api.utilities.showMessage(mapId, message, false);
+    setDisplayState('view');
   };
 
   /**
diff --git a/packages/geoview-core/src/core/components/layers/left-panel/left-panel-styles.ts b/packages/geoview-core/src/core/components/layers/left-panel/left-panel-styles.ts
index e509e769b4a..3f0bc76f89b 100644
--- a/packages/geoview-core/src/core/components/layers/left-panel/left-panel-styles.ts
+++ b/packages/geoview-core/src/core/components/layers/left-panel/left-panel-styles.ts
@@ -47,7 +47,7 @@ export const getSxClasses = (theme: Theme) => ({
           color: theme.palette.geoViewColor.error.main,
         },
       },
-      '&.loading': {
+      '&.loading, &.processing': {
         background: theme.palette.geoViewColor.info.light[600],
         '& .MuiListItemText-secondary': {
           fontWeight: 'bold',
diff --git a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx
index a1af60cab47..58928b98f75 100644
--- a/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx
+++ b/packages/geoview-core/src/core/components/layers/left-panel/single-layer.tsx
@@ -93,7 +93,7 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi
     if (layer.layerStatus === 'error') {
       return t('legend.layerError');
     }
-    if (layer.layerStatus === 'processing') {
+    if (layer.layerStatus === 'processing' || layer.layerStatus === 'loading') {
       return t('legend.layerLoading');
     }
 
@@ -165,7 +165,7 @@ export function SingleLayer({ isDragging, depth, layer, setIsLayersListPanelVisi
   }
 
   function renderMoreLayerButtons() {
-    if (layer.layerStatus === 'processing' || displayState !== 'view') {
+    if (layer.layerStatus === 'processing' || layer.layerStatus === 'loading' || displayState !== 'view') {
       return null;
     }
     if (layer.layerStatus === 'error') {
diff --git a/packages/geoview-core/src/core/components/legend/legend-styles.ts b/packages/geoview-core/src/core/components/legend/legend-styles.ts
index d880c66cee1..deabd8332fc 100644
--- a/packages/geoview-core/src/core/components/legend/legend-styles.ts
+++ b/packages/geoview-core/src/core/components/legend/legend-styles.ts
@@ -6,6 +6,7 @@ export const getSxClasses = (theme: Theme) => ({
     display: 'flex',
     flexDirection: 'column',
     height: '700px',
+    backgroundColor: theme.palette.geoViewColor.bgColor.main,
   },
   title: {
     textAlign: 'left',
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
index e7d23aee59e..20bd579023c 100644
--- 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
@@ -12,11 +12,11 @@ export const getSxClasses = (theme: Theme) => ({
     width: 'auto',
     backgroundColor: 'transparent !important',
     height: 'inherit !important',
-    color: theme.palette.geoViewColor.white,
+    color: theme.palette.geoViewColor.bgColor.light[800],
     lineHeight: 1.5,
     ':hover': {
       backgroundColor: 'transparent !important',
-      color: theme.palette.geoViewColor.white,
+      color: theme.palette.geoViewColor.bgColor.light[600],
     },
   },
   mousePositionTextContainer: {
diff --git a/packages/geoview-core/src/core/components/notifications/notifications.tsx b/packages/geoview-core/src/core/components/notifications/notifications.tsx
index 972268d617b..688203151e2 100644
--- a/packages/geoview-core/src/core/components/notifications/notifications.tsx
+++ b/packages/geoview-core/src/core/components/notifications/notifications.tsx
@@ -99,7 +99,8 @@ export default function Notifications(): JSX.Element {
           tooltip="appbar.notifications"
           tooltipPlacement="bottom-end"
           onClick={handleOpenPopover}
-          className={open ? 'active' : ''}
+          className={open ? 'style1' : ''}
+          color="primary"
         >
           <NotificationsIcon />
         </IconButton>
diff --git a/packages/geoview-core/src/ui/style/light-theme.ts b/packages/geoview-core/src/ui/style/light-theme.ts
index 9d227bb0a61..1729b9ccfab 100644
--- a/packages/geoview-core/src/ui/style/light-theme.ts
+++ b/packages/geoview-core/src/ui/style/light-theme.ts
@@ -4,7 +4,7 @@ import { GeoViewColorClass, IGeoViewColors } from './types';
 export const lightThemeColors: IGeoViewColors = {
   ...defaultGeoViewColors,
 
-  bgColor: new GeoViewColorClass('#F8F8F8'),
-  primary: new GeoViewColorClass('#515BA5'),
+  bgColor: new GeoViewColorClass('#F9F9F9'),
+  primary: new GeoViewColorClass('#AA4A44'),
   textColor: new GeoViewColorClass('#000000'),
 };
diff --git a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts
index b6d64028db5..732bc1447dd 100644
--- a/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts
+++ b/packages/geoview-core/src/ui/style/themeOptionsGenerator.ts
@@ -59,21 +59,20 @@ export const generateThemeOptions = function (geoViewColors: IGeoViewColors = de
       divider: 'rgba(0, 0, 0, 0.12)',
       background: {
         paper: geoViewColors.bgColor.light[600],
-        default: '#fff',
-        // grey: '#eeeeee',
+        default: geoViewColors.bgColor.light[500]
       },
       action: {
-        active: 'rgba(81,91,165, 0.94)',
-        hover: `rgba(81,91,165, ${opacity.hoverOpacity})`,
+        active: geoViewColors.primary.main,
+        hover: geoViewColors.primary.opacity(opacity.hoverOpacity),
         hoverOpacity: opacity.hoverOpacity,
-        selected: `rgba(81,91,165, ${opacity.selectedOpacity})`,
+        selected: geoViewColors.primary.opacity(opacity.selectedOpacity),
         selectedOpacity: opacity.selectedOpacity,
         // hoverRow: `rgba(0, 255, 255, ${opacity.hoverOpacity})`,
         // selectedRow: `rgba(0, 255, 255, ${opacity.selectedOpacity})`,
         disabled: 'rgba(0, 0, 0, 0.26)',
         disabledBackground: `rgba(0, 0, 0, ${opacity.focusOpacity})`,
         disabledOpacity: opacity.disabledOpacity,
-        focus: `rgba(0, 0, 0, ${opacity.focusOpacity})`,
+        focus: geoViewColors.primary.opacity(opacity.focusOpacity),
         focusOpacity: opacity.focusOpacity,
         activatedOpacity: opacity.activatedOpacity,
       },
@@ -179,6 +178,14 @@ export const generateThemeOptions = function (geoViewColors: IGeoViewColors = de
       left: '0%',
     },
     components: {
+      MuiTooltip: {
+        styleOverrides: {
+          tooltip: {
+            backgroundColor: geoViewColors.bgColor.dark[800],
+            color: geoViewColors.bgColor.light[800],
+          },
+        },
+      },
       MuiIconButton: {
         styleOverrides: {
           root: {