diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index bf859af17d8..3bb5ae7f5a1 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -19,10 +19,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Echo PR info
+        env:
+          ACTOR: ${{ github.actor }}
+          ACTION: ${{ github.event.action }}
+          MERGE: ${{ github.event.pull_request.merged }}
+          HEAD: ${{ github.head_ref }}
         run: |
-          echo User ${{ github.actor }} is about to ${{ github.event.action }} this Pull Request.
-          echo The PR is merged: ${{ github.event.pull_request.merged }}
-          echo The PR head reference: ${{ github.head_ref }}
+          echo 'User $ACTOR is about to $ACTION this Pull Request.'
+          echo 'The PR is merged: $MERGE.'
+          echo 'The PR head reference: $HEAD.'
           echo '${{ toJSON(github) }}'
 
       - name: Check if contributor is an org member
diff --git a/packages/geoview-core/src/core/components/data-grid/data-grid-api.ts b/packages/geoview-core/src/core/components/data-grid/data-grid-api.ts
index c8809db3407..64fba6182ac 100644
--- a/packages/geoview-core/src/core/components/data-grid/data-grid-api.ts
+++ b/packages/geoview-core/src/core/components/data-grid/data-grid-api.ts
@@ -4,6 +4,7 @@ import { AbstractGeoViewVector, api } from '../../../app';
 import { getLocalizedValue } from '../../utils/utilities';
 
 import { LayerDataGrid } from './layer-data-grid';
+import { TypeDisplayLanguage } from '../../../geo/map/map-schema-types';
 
 export interface TypeLayerDataGridProps {
   layerId: string;
@@ -18,6 +19,8 @@ export interface TypeLayerDataGridProps {
 export class DataGridAPI {
   mapId!: string;
 
+  displayLanguage!: TypeDisplayLanguage;
+
   /**
    * initialize the data grid api
    *
@@ -25,6 +28,7 @@ export class DataGridAPI {
    */
   constructor(mapId: string) {
     this.mapId = mapId;
+    this.displayLanguage = api.map(mapId).displayLanguage;
   }
 
   /**
@@ -48,6 +52,7 @@ export class DataGridAPI {
         headerName: columnHeader[i],
         width: 150,
         type: 'string',
+        hide: columnHeader[i] === 'featureKey',
       });
     }
 
@@ -63,6 +68,8 @@ export class DataGridAPI {
         pageSize: 50,
         rowsPerPageOptions: [25, 50, 100],
         autoHeight: true,
+        rowId: 'featureKey',
+        displayLanguage: this.displayLanguage,
       }),
     ]);
   };
diff --git a/packages/geoview-core/src/core/components/data-grid/layer-data-grid.tsx b/packages/geoview-core/src/core/components/data-grid/layer-data-grid.tsx
index ffc0598f1e7..293292b4707 100644
--- a/packages/geoview-core/src/core/components/data-grid/layer-data-grid.tsx
+++ b/packages/geoview-core/src/core/components/data-grid/layer-data-grid.tsx
@@ -1,4 +1,7 @@
-import { DataGrid, DataGridProps } from '@mui/x-data-grid';
+import { DataGrid, DataGridProps, gridClasses, GridToolbar, GridCellParams, frFR, enUS } from '@mui/x-data-grid';
+
+import { TypeDisplayLanguage } from '../../../geo/map/map-schema-types';
+import { Tooltip } from '../../../ui';
 
 /**
  * Create a data grid (table) component for a lyer features all request
@@ -6,14 +9,96 @@ import { DataGrid, DataGridProps } from '@mui/x-data-grid';
  * @param {DataGridProps} props table properties
  * @returns {JSX.Element} returns table component
  */
-export function LayerDataGrid(props: DataGridProps) {
+
+// extend the DataGridProps to include the key row element
+interface CustomDataGridProps extends DataGridProps {
+  rowId: string;
+  displayLanguage: TypeDisplayLanguage;
+}
+
+const sxClasses = {
+  DataGrid: {
+    boxShadow: 2,
+    border: 2,
+    borderColor: 'primary.light',
+    '& .MuiDataGrid-cell:hover': {
+      color: 'text.primary',
+    },
+    [`& div.even.${gridClasses.row}`]: {
+      backgroundColor: 'grey.200',
+      '&:hover, &.Mui-hovered': {
+        backgroundColor: 'action.hoverRow',
+        '@media (hover: none)': {
+          backgroundColor: 'transparent',
+        },
+      },
+      '&.Mui-selected': {
+        backgroundColor: 'action.selectedRow',
+        '&:hover, &.Mui-hovered': {
+          backgroundColor: 'action.hoverRow',
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: 'action.selectedRow',
+          },
+        },
+      },
+    },
+    [`& .${gridClasses.row}`]: {
+      '&:hover, &.Mui-hovered': {
+        backgroundColor: 'action.hoverRow',
+        '@media (hover: none)': {
+          backgroundColor: 'transparent',
+        },
+      },
+      '&.Mui-selected': {
+        backgroundColor: 'action.selectedRow',
+        '&:hover, &.Mui-hovered': {
+          backgroundColor: 'action.hoverRow',
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: 'action.selectedRow',
+          },
+        },
+      },
+    },
+  },
+};
+
+export function LayerDataGrid(props: CustomDataGridProps) {
+  const { rowId, displayLanguage, columns } = props;
+
+  // tooltip implementation for column content
+  // TODO: works only with hover and add tooltips even when not needed. need improvement
+  columns.forEach((column) => {
+    // eslint-disable-next-line no-param-reassign
+    column.renderCell = (params: GridCellParams) => (
+      <Tooltip title={params.value}>
+        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis' }}>{params.value}</span>
+      </Tooltip>
+    );
+  });
+
+  // set locale from display language
+  const locale =
+    displayLanguage === 'en' ? enUS.components.MuiDataGrid.defaultProps.localeText : frFR.components.MuiDataGrid.defaultProps.localeText;
+
   return (
-    <div style={{ height: 400, width: '100%' }}>
-      <DataGrid
-        {...props}
-        getRowId={(row) => row.OBJECTID}
-        getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd')}
-      />
+    <div style={{ display: 'flex', height: '100%' }}>
+      <div style={{ flexGrow: 1 }}>
+        <DataGrid
+          localeText={locale}
+          sx={sxClasses.DataGrid}
+          {...props}
+          getRowId={(row) => row[rowId]}
+          getRowClassName={(params) => (params.indexRelativeToCurrentPage % 2 === 0 ? 'even' : 'odd')}
+          checkboxSelection
+          disableSelectionOnClick
+          rowsPerPageOptions={[50]}
+          components={{
+            Toolbar: GridToolbar,
+          }}
+        />
+      </div>
     </div>
   );
 }
diff --git a/packages/geoview-core/src/geo/layer/geoview-layers/vector/abstract-geoview-vector.ts b/packages/geoview-core/src/geo/layer/geoview-layers/vector/abstract-geoview-vector.ts
index f78856f2191..d5163e83ace 100644
--- a/packages/geoview-core/src/geo/layer/geoview-layers/vector/abstract-geoview-vector.ts
+++ b/packages/geoview-core/src/geo/layer/geoview-layers/vector/abstract-geoview-vector.ts
@@ -169,9 +169,16 @@ export abstract class AbstractGeoViewVector extends AbstractGeoViewLayer {
     const outfields = getLocalizedValue(featureInfo?.outfields, this.mapId)?.split(',');
     const aliasFields = getLocalizedValue(featureInfo?.aliasFields, this.mapId)?.split(',');
     const queryResult: TypeArrayOfFeatureInfoEntries = [];
+    let keyCounter = 0;
+
     features.forEach((feature) => {
-      const featureFields = feature.getKeys();
       const featureInfoEntry: TypeFeatureInfoEntry = {};
+
+      // add a key to the feature for building data-grid
+      featureInfoEntry.featureKey = keyCounter++;
+
+      // query feature info
+      const featureFields = feature.getKeys();
       featureFields.forEach((fieldName) => {
         if (fieldName !== 'geometry') {
           if (outfields?.includes(fieldName)) {
diff --git a/packages/geoview-core/src/ui/style/theme.tsx b/packages/geoview-core/src/ui/style/theme.tsx
index 74b6dd16b02..187e8ca40a7 100644
--- a/packages/geoview-core/src/ui/style/theme.tsx
+++ b/packages/geoview-core/src/ui/style/theme.tsx
@@ -7,6 +7,14 @@ const headingStyles = {
   fontWeight: 700,
 };
 
+const opacity = {
+  hoverOpacity: 0.08,
+  selectedOpacity: 0.16,
+  disabledOpacity: 0.38,
+  focusOpacity: 0.12,
+  activatedOpacity: 0.24,
+};
+
 /**
  * Make changes to MUI default LIGHT theme/mode here
  * see https://mui.com/material-ui/customization/palette/
@@ -83,16 +91,18 @@ const lightPalette = {
   },
   action: {
     active: 'rgba(0, 0, 0, 0.54)',
-    hover: 'rgba(0, 0, 0, 0.04)',
-    hoverOpacity: 0.04,
-    selected: 'rgba(0, 0, 0, 0.08)',
-    selectedOpacity: 0.08,
+    hover: `rgba(0, 0, 0, ${opacity.hoverOpacity})`,
+    hoverRow: `rgba(0, 255, 255, ${opacity.hoverOpacity})`,
+    hoverOpacity: opacity.hoverOpacity,
+    selected: `rgba(0, 0, 0, ${opacity.selectedOpacity})`,
+    selectedRow: `rgba(0, 255, 255, ${opacity.selectedOpacity})`,
+    selectedOpacity: opacity.selectedOpacity,
     disabled: 'rgba(0, 0, 0, 0.26)',
-    disabledBackground: 'rgba(0, 0, 0, 0.12)',
-    disabledOpacity: 0.38,
-    focus: 'rgba(0, 0, 0, 0.12)',
-    focusOpacity: 0.12,
-    activatedOpacity: 0.12,
+    disabledBackground: `rgba(0, 0, 0, ${opacity.focusOpacity})`,
+    disabledOpacity: opacity.disabledOpacity,
+    focus: `rgba(0, 0, 0, ${opacity.focusOpacity})`,
+    focusOpacity: opacity.focusOpacity,
+    activatedOpacity: opacity.activatedOpacity,
   },
 };
 
@@ -173,16 +183,16 @@ const darkPalette = {
   },
   action: {
     active: '#fff',
-    hover: 'rgba(255, 255, 255, 0.08)',
-    hoverOpacity: 0.08,
-    selected: 'rgba(255, 255, 255, 0.16)',
-    selectedOpacity: 0.16,
+    hover: `rgba(255, 255, 255, ${opacity.hoverOpacity})`,
+    hoverOpacity: opacity.hoverOpacity,
+    selected: `rgba(255, 255, 255, ${opacity.selectedOpacity})`,
+    selectedOpacity: opacity.selectedOpacity,
     disabled: 'rgba(255, 255, 255, 0.3)',
-    disabledBackground: 'rgba(255, 255, 255, 0.12)',
-    disabledOpacity: 0.38,
-    focus: 'rgba(255, 255, 255, 0.12)',
-    focusOpacity: 0.12,
-    activatedOpacity: 0.24,
+    disabledBackground: `rgba(255, 255, 255, ${opacity.focusOpacity})`,
+    disabledOpacity: opacity.disabledOpacity,
+    focus: `rgba(255, 255, 255, ${opacity.focusOpacity})`,
+    focusOpacity: opacity.focusOpacity,
+    activatedOpacity: opacity.activatedOpacity,
   },
 };
 
diff --git a/packages/geoview-core/src/ui/tooltip/tooltip.tsx b/packages/geoview-core/src/ui/tooltip/tooltip.tsx
index 01676ed6551..5e75680b562 100644
--- a/packages/geoview-core/src/ui/tooltip/tooltip.tsx
+++ b/packages/geoview-core/src/ui/tooltip/tooltip.tsx
@@ -14,8 +14,8 @@ interface TypeTooltipProps extends TooltipProps {
  * Create a Material UI Tooltip component
  *
  * @param {TypeTooltipProps} props custom tooltip properties
- * @returns {JSX.Element} the auto complete ui component
+ * @returns {JSX.Element} the tooltip ui component
  */
 export function Tooltip(props: TypeTooltipProps): JSX.Element {
-  return <MaterialTooltip {...props} />;
+  return <MaterialTooltip enterDelay={500} leaveDelay={200} {...props} />;
 }