diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index 424d55e..970fa0a 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { memo, useState } from "react";
 import PropTypes from "prop-types";
 import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table";
 import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Box, Grid, ButtonGroup, IconButton, makeStyles, useTheme } from "@material-ui/core";
@@ -9,6 +9,7 @@ import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
 import ItemTableCell from "../ItemTableCell";
 import LastUpdatedCell from "../LastUpdatedCell/";
 import jester from "./loading-annimation.gif";
+import { FixedSizeList, areEqual } from 'react-window';
 
 export default function ItemTable({ data, rowCanBeSelected, loading }) {
     const [selectedRow, setSelectedRow] = useState({ queue: null, number: null });
@@ -22,7 +23,7 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
         },
         hoverBackgroundColor: {
             "&:hover": {
-                // The !important is placed here to enforce CSS specificity. 
+                // The !important is placed here to enforce CSS specificity.
                 // See: https://material-ui.com/styles/advanced/#css-injection-order
                 backgroundColor: `${theme.palette.primary[200]} !important`,
             },
@@ -89,28 +90,75 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
     );
     const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance;
 
-    return (
-        loading 
-        ? (
-            <Box className={classes.loadingAnnimation}>
-                <img src={jester} alt="Items are loading." />
-            </Box>
+    const RenderRow = memo(({ index, style }) => {
+        const row = rows[index]
+        prepareRow(row)
+        let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number
+        return (
+            <TableRow
+                style={style}
+                hover
+                onClick={() => {
+                    history.push(`/${row.original.queue}/${row.original.number}`);
+                    setSelectedRow({ queue: row.original.queue, number: row.original.number });
+                }}
+                // This functionality should be achieved by using the selected prop and
+                // overriding the selected class but this applied the secondary color at 0.08% opacity.
+                // Overridding the root class is a workaround.
+                classes={{
+                    root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows,
+                    hover: classes.hoverBackgroundColor
+                }}
+                {...row.getRowProps({ style, })}
+            >
+                {row.cells.map(cell => (
+                    cell.render(_ => {
+                        switch (cell.column.id) {
+                            case "dateReceived":
+                                return (
+                                    <ItemTableCell TableCellProps={cell.getCellProps()}>
+                                        <RelativeTime value={cell.value} />
+                                    </ItemTableCell>
+                                );
+                            case "lastUpdated":
+                                return (
+                                    <LastUpdatedCell
+                                        time={cell.value}
+                                        ItemTableCellProps={cell.getCellProps()}
+                                    />
+                                );
+                            default:
+                                return (
+                                    <ItemTableCell TableCellProps={cell.getCellProps()}>
+                                        {cell.value}
+                                    </ItemTableCell>
+                                );
+                        }
+                    })
+                ))}
+            </TableRow>
         )
-        : (
-            <TableContainer>
-                <Table
-                    {...getTableProps}
-                    aria-label="Table of Queue Items"
-                    size="small"
-                >
-                    <TableHead>
-                        {headerGroups.map(headerGroup => (
-                            <TableRow {...headerGroup.getHeaderGroupProps()}>
-                                {headerGroup.headers.map(column => (
-                                        <TableCell {...column.getHeaderProps()}>
+    }, areEqual,
+        [prepareRow, rows]
+    )
+    return (
+        loading
+            ? (
+                <Box className={classes.loadingAnnimation}>
+                    <img src={jester} alt="Items are loading." />
+                </Box>
+            )
+            : (
+                <TableContainer>
+                    <Table stickyHeader {...getTableProps()} className="table"  size="small">
+                        <TableHead>
+                            {headerGroups.map(headerGroup => (
+                                <TableRow {...headerGroup.getHeaderGroupProps()} className="tr">
+                                    {headerGroup.headers.map(column => (
+                                        <TableCell {...column.getHeaderProps()} className="th">
                                             <Grid container spacing={0}>
-                                                <Grid item sm={10} >
-                                                    {column.render("Filter")}
+                                                <Grid item sm={10}>
+                                                    {column.render('Filter')}
                                                 </Grid>
                                                 <Grid item sm={2} alignItems='center' justify='center'>
                                                     <ButtonGroup orientation="vertical" size="small">
@@ -142,12 +190,21 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
                                                 </Grid>
                                             </Grid>
                                         </TableCell>
-                                ))}
-                            </TableRow>
-                        ))}
-                    </TableHead>
-                    <TableBody {...getTableBodyProps()}>
-                        {rows.map((row) => {
+                                    ))}
+                                </TableRow>
+                            ))}
+                        </TableHead>
+
+                        <TableBody {...getTableBodyProps()}>
+                            <FixedSizeList
+                                height={800}
+                                itemCount={rows.length}
+                                itemSize={120}
+                                width="100%"
+                            >
+                                {RenderRow}
+                            </FixedSizeList>
+                            {/* {rows.map((row) => {
                             prepareRow(row);
                             let isSelected = selectedRow.queue === row.original.queue && selectedRow.number === row.original.number
                             return (
@@ -157,7 +214,7 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
                                         history.push(`/${row.original.queue}/${row.original.number}`);
                                         setSelectedRow({ queue: row.original.queue, number: row.original.number });
                                     }}
-                                    // This functionality should be achieved by using the selected prop and 
+                                    // This functionality should be achieved by using the selected prop and
                                     // overriding the selected class but this applied the secondary color at 0.08% opacity.
                                     // Overridding the root class is a workaround.
                                     classes={{
@@ -193,11 +250,11 @@ export default function ItemTable({ data, rowCanBeSelected, loading }) {
                                     ))}
                                 </TableRow>
                             );
-                        })}
-                    </TableBody>
-                </Table>
-            </TableContainer>
-        )
+                        })} */}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+            )
     );
 };