diff --git a/modern/src/reports/RouteReportPage.js b/modern/src/reports/RouteReportPage.js
index 5003ff3117..27b4db1848 100644
--- a/modern/src/reports/RouteReportPage.js
+++ b/modern/src/reports/RouteReportPage.js
@@ -2,10 +2,14 @@ import React, { Fragment, useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 import {
-  IconButton, Table, TableBody, TableCell, TableHead, TableRow,
+  IconButton, Skeleton,
 } from '@mui/material';
 import GpsFixedIcon from '@mui/icons-material/GpsFixed';
 import LocationSearchingIcon from '@mui/icons-material/LocationSearching';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { FixedSizeGrid } from 'react-window';
 import ReportFilter from './components/ReportFilter';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import PageLayout from '../common/components/PageLayout';
@@ -19,7 +23,6 @@ import MapRoutePath from '../map/MapRoutePath';
 import MapRoutePoints from '../map/MapRoutePoints';
 import MapPositions from '../map/MapPositions';
 import useReportStyles from './common/useReportStyles';
-import TableShimmer from '../common/components/TableShimmer';
 import MapCamera from '../map/MapCamera';
 import MapGeofence from '../map/MapGeofence';
 import scheduleReport from './common/scheduleReport';
@@ -28,6 +31,10 @@ const RouteReportPage = () => {
   const navigate = useNavigate();
   const classes = useReportStyles();
   const t = useTranslation();
+  const theme = useTheme();
+
+  const phone = useMediaQuery(theme.breakpoints.down('md'));
+  const desktop = useMediaQuery(theme.breakpoints.up('lg'));
 
   const positionAttributes = usePositionAttributes(t);
 
@@ -116,7 +123,7 @@ const RouteReportPage = () => {
             <MapCamera positions={items} />
           </div>
         )}
-        <div className={classes.containerMain}>
+        <div className={classes.containerMain} style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
           <div className={classes.header}>
             <ReportFilter handleSubmit={handleSubmit} handleSchedule={handleSchedule} multiDevice>
               <ColumnSelect
@@ -128,42 +135,94 @@ const RouteReportPage = () => {
               />
             </ReportFilter>
           </div>
-          <Table>
-            <TableHead>
-              <TableRow>
-                <TableCell className={classes.columnAction} />
-                <TableCell>{t('sharedDevice')}</TableCell>
-                {columns.map((key) => (<TableCell key={key}>{positionAttributes[key]?.name || key}</TableCell>))}
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {!loading ? items.slice(0, 4000).map((item) => (
-                <TableRow key={item.id}>
-                  <TableCell className={classes.columnAction} padding="none">
-                    {selectedItem === item ? (
-                      <IconButton size="small" onClick={() => setSelectedItem(null)}>
-                        <GpsFixedIcon fontSize="small" />
-                      </IconButton>
-                    ) : (
-                      <IconButton size="small" onClick={() => setSelectedItem(item)}>
-                        <LocationSearchingIcon fontSize="small" />
-                      </IconButton>
-                    )}
-                  </TableCell>
-                  <TableCell>{devices[item.deviceId].name}</TableCell>
-                  {columns.map((key) => (
-                    <TableCell key={key}>
-                      <PositionValue
-                        position={item}
-                        property={item.hasOwnProperty(key) ? key : null}
-                        attribute={item.hasOwnProperty(key) ? null : key}
-                      />
-                    </TableCell>
-                  ))}
-                </TableRow>
-              )) : (<TableShimmer columns={columns.length + 2} startAction />)}
-            </TableBody>
-          </Table>
+          <div style={{ flex: 1 }}>
+            <AutoSizer>
+              {({ height, width }) => (
+                <FixedSizeGrid
+                  height={height}
+                  width={width}
+                  columnCount={columns.length + 2}
+                  columnWidth={(columns.length + 2) * (width * (phone ? 0.26 : desktop ? 0.1 : 0.18)) >= width ?
+                    width * (phone ? 0.26 : desktop ? 0.1 : 0.18) : width / (columns.length + 2)}
+                  rowCount={items.length > 0 ? items.length : 5}
+                  rowHeight={52}
+                  overscanRowCount={20}
+                >
+                  {({ columnIndex, rowIndex, style }) => {
+                    const item = items[rowIndex];
+                    const columnKey = columns[columnIndex - 2];
+                    return (
+                      rowIndex === 0 ?
+                        columnIndex === 0 ?
+                          (
+                            <div className={classes.cellStyle} style={style} />
+                          )
+                          :
+                          columnIndex === 1 ?
+                            (
+                              <div className={classes.cellStyle} style={style}>
+                                <b>{t('sharedDevice')}</b>
+                              </div>
+                            ) :
+                            columnIndex < columns.length + 2 ?
+                              (
+                                <div className={classes.cellStyle} style={style}>
+                                  <b>{positionAttributes[columnKey]?.name || columnKey}</b>
+                                </div>
+                              )
+                              :
+                              null
+                        :
+                        !loading ?
+                          item ?
+                            columnIndex === 0 ?
+                              (
+                                <div className={`${classes.cellStyle} ${classes.columnAction}`} style={style}>
+                                  {selectedItem === item ?
+                                    (
+                                      <IconButton size="small" onClick={() => setSelectedItem(null)}>
+                                        <GpsFixedIcon fontSize="small" />
+                                      </IconButton>
+                                    )
+                                    :
+                                    (
+                                      <IconButton size="small" onClick={() => setSelectedItem(item)}>
+                                        <LocationSearchingIcon fontSize="small" />
+                                      </IconButton>
+                                    )}
+                                </div>
+                              )
+                              :
+                              columnIndex === 1 ?
+                                (
+                                  <div className={classes.cellStyle} style={style}>
+                                    {devices[item.deviceId].name}
+                                  </div>
+                                )
+                                :
+                                (
+                                  <div className={classes.cellStyle} style={style}>
+                                    <PositionValue
+                                      position={item}
+                                      property={item.hasOwnProperty(columnKey) ? columnKey : null}
+                                      attribute={item.hasOwnProperty(columnKey) ? null : columnKey}
+                                    />
+                                  </div>
+                                )
+                            :
+                            null
+                          :
+                          (
+                            <div className={classes.cellStyle} style={style}>
+                              <Skeleton variant="text" width={width / (columns.length * 1.5)} />
+                            </div>
+                          )
+                    );
+                  }}
+                </FixedSizeGrid>
+              )}
+            </AutoSizer>
+          </div>
         </div>
       </div>
     </PageLayout>
diff --git a/modern/src/reports/common/useReportStyles.js b/modern/src/reports/common/useReportStyles.js
index e09c86959b..255d2b8bb0 100644
--- a/modern/src/reports/common/useReportStyles.js
+++ b/modern/src/reports/common/useReportStyles.js
@@ -46,4 +46,10 @@ export default makeStyles((theme) => ({
     flexGrow: 1,
     overflow: 'hidden',
   },
+  cellStyle: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: '5px',
+    borderBottom: '1px solid lightgrey',
+  },
 }));