diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index e45dc63..8fcda70 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -1,26 +1,17 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { useTable, useFilters, useFlexLayout, useSortBy } from "react-table";
-import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, Grid, ButtonGroup, IconButton, makeStyles, useTheme } from "@material-ui/core";
+import { makeStyles, useTheme, TableContainer, Table, TableHead, TableRow, TableCell, Grid, TableBody, } from "@material-ui/core";
 import { useHistory } from "react-router-dom";
 import RelativeTime from "react-relative-time";
-import ItemTableFilter from "../ItemTableFilter/"
-import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
-
+import ItemTableFilter from "../ItemTableFilter/";
+import ItemtTableSortButtons from "../ItemTableSortButtons/"
 
 export default function ItemTable({ data, rowCanBeSelected }) {
-    const [selectedRow, setSelectedRow] = useState({ queue: null, number: null});
+    const [selectedRow, setSelectedRow] = useState({ queue: null, number: null });
 
-    const theme = useTheme(); 
+    const theme = useTheme();
     const useStyles = makeStyles({
-        // Fully visible for active icons
-        activeSortIcon: {
-            opacity: 1,
-        },
-        // Half visible for inactive icons
-        inactiveSortIcon: {
-            opacity: 0.2,
-        },
         rowSelected: {
             backgroundColor: theme.palette.type === 'light' ? theme.palette.primary[100] : theme.palette.primary[600],
         },
@@ -34,6 +25,12 @@ export default function ItemTable({ data, rowCanBeSelected }) {
             borderLeftStyle: "solid",
             borderColor: theme.palette.type === "light" ? theme.palette.grey[300] : theme.palette.grey[500]
         },
+        tableMargin: {
+            marginTop: theme.spacing(2)
+        },
+        tableHeaderPadding: {
+            paddingBottom: theme.spacing(2)
+        },
     });
     const classes = useStyles();
 
@@ -73,53 +70,63 @@ export default function ItemTable({ data, rowCanBeSelected }) {
     const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow, } = tableInstance;
 
     return (
-        <TableContainer component={Paper} >
-            <Table {...getTableProps} aria-label="Table of Queue Items" >
+        <TableContainer>
+            <Table 
+                {...getTableProps} 
+                aria-label="Table of Queue Items" 
+                size="small" 
+                classes={{ root: classes.tableMargin }}
+            >  
                 <TableHead>
                     {headerGroups.map(headerGroup => (
                         <TableRow {...headerGroup.getHeaderGroupProps()}>
-                            {headerGroup.headers.map(column => (
-                                <Grid container spacing={1}>
-                                    <TableCell {...column.getHeaderProps()}>
-                                        <Grid container spacing={0}>
-                                            <Grid item sm={10} >
-                                                {column.render("Filter")}
-                                            </Grid>
-                                            <Grid item sm={2} alignItems='center' justify='center'>
-                                                <ButtonGroup orientation="vertical" size="small">
-                                                    <IconButton
-                                                        size="small"
-                                                        onClick={(_ => {
-                                                            const isSortedAsc = column.isSorted && !column.isSortedDesc;
-                                                            isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false)
-                                                        })}
-                                                    >
-                                                        <ArrowUpward {...column.getSortByToggleProps()}
-                                                            fontSize="inherit"
-                                                            color={column.isSorted && column.isSortedDesc === false ? "default" : "disabled"}
-                                                        />
-                                                    </IconButton>
-                                                    <IconButton
-                                                        size="small"
-                                                        onClick={(_ => {
-                                                            const isSortedDesc = column.isSorted && column.isSortedDesc;
-                                                            isSortedDesc ? column.clearSortBy() : column.toggleSortBy(true)
-                                                        })}
-                                                    >
-                                                        <ArrowDownward {...column.getSortByToggleProps(column.isSortedDesc)}
-                                                            fontSize="inherit"
-                                                            color={column.isSorted && column.isSortedDesc ? "default" : "disabled"}
-                                                        />
-                                                    </IconButton>
-                                                </ButtonGroup>
+                            {headerGroup.headers.map(column => {
+                                // Determine sort directions
+                                const isSortedAsc = column.isSorted && !column.isSortedDesc;
+                                const isSortedDesc = column.isSorted && column.isSortedDesc;
+
+                                return (
+                                    <Grid container spacing={0}>
+                                        <TableCell
+                                            {...column.getHeaderProps()}
+                                            classes={{ root: classes.tableHeaderPadding }}
+                                        >
+                                            <Grid container spacing={0}>
+                                                <Grid item sm={10} >
+                                                    {column.render("Filter")}
+                                                </Grid>
+                                                <Grid item sm={2} alignItems='center' justify='center'>
+                                                    <ItemtTableSortButtons
+                                                        sortAscArrowProps={{
+                                                            ...column.getSortByToggleProps(),
+                                                            onClick: _ => (isSortedAsc ? column.clearSortBy() : column.toggleSortBy(false))
+                                                        }}
+                                                        sortDescArrowProps={{
+                                                            ...column.getSortByToggleProps(),
+                                                            onClick: _ => (isSortedDesc ? column.clearSortBy() : column.toggleSortBy(true))
+                                                        }}
+                                                        sortDirection={(_ => {
+                                                            if (isSortedAsc) {
+                                                                return 'asc';
+                                                            }
+                                                            else if (isSortedDesc) {
+                                                                return 'desc';
+                                                            }
+                                                            else {
+                                                                return undefined;
+                                                            }
+                                                        })()}
+                                                    />
+                                                </Grid>
                                             </Grid>
-                                        </Grid>
-                                    </TableCell>
-                                </Grid>
-                            ))}
+                                        </TableCell>
+                                    </Grid>
+                                );
+                            })}
                         </TableRow>
                     ))}
                 </TableHead>
+
                 <TableBody {...getTableBodyProps()}>
                     {rows.map((row, i) => {
                         prepareRow(row);
@@ -136,7 +143,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                                 classes={{ root: (isSelected && rowCanBeSelected) ? classes.rowSelected : classes.bandedRows }}
                                 {...row.getRowProps()} >
                                 {row.cells.map(cell => (
-                                    <TableCell 
+                                    <TableCell
                                         classes={{ root: classes.columnBorders }}
                                         {...cell.getCellProps()}
                                     >
@@ -147,6 +154,7 @@ export default function ItemTable({ data, rowCanBeSelected }) {
                         );
                     })}
                 </TableBody>
+
             </Table>
         </TableContainer>
     );
diff --git a/src/components/ItemTableSortButtons/ItemTableSortButtons.js b/src/components/ItemTableSortButtons/ItemTableSortButtons.js
new file mode 100644
index 0000000..564c1fb
--- /dev/null
+++ b/src/components/ItemTableSortButtons/ItemTableSortButtons.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from "prop-types";
+import { ButtonGroup, IconButton } from "@material-ui/core";
+import { ArrowDownward, ArrowUpward } from "@material-ui/icons";
+
+export default function ItemTableSortButtons({ sortDirection, sortAscArrowProps, sortDescArrowProps }) {
+    return (
+        <ButtonGroup orientation="vertical" size="small">
+            <IconButton edge="start">
+                <ArrowUpward 
+                    {...sortAscArrowProps}
+                    // Inherit fontsize from containing element to avoid overflow.
+                    fontSize="inherit"
+                    color={sortDirection === 'asc' ? "secondary" : "default"}
+                />
+            </IconButton>
+            <IconButton edge="start">
+                <ArrowDownward 
+                    {...sortDescArrowProps}
+                    // Inherit fontsize from containing element to avoid overflow.
+                    fontSize="inherit"
+                    color={sortDirection === 'desc' ? "secondary" : "default"}
+                />
+            </IconButton>
+        </ButtonGroup>
+    )
+}
+
+ItemTableSortButtons.propTypes = {
+    /** String representing sort direction. */
+    "sortDirection": PropTypes.oneOf(['asc', 'desc', undefined ]),
+    /** Props passed to ArrowUpward component. */
+    "sortAscArrowProps": PropTypes.object,
+    /** Props passed to ArrowDownward component. */
+    "sortDescArrowProps": PropTypes.object
+};
+
+ItemTableSortButtons.defaultProps = {
+    "sortDirection": undefined,
+    "sortAscArrowProps": { onClick: _ => alert("No onClick function set. This does nothing.") },
+    "sortDescArrowProps": { onClick: _ => alert("No onClick function set. This does nothing.") }
+};
+
diff --git a/src/components/ItemTableSortButtons/ItemTableSortButtons.md b/src/components/ItemTableSortButtons/ItemTableSortButtons.md
new file mode 100644
index 0000000..33037b2
--- /dev/null
+++ b/src/components/ItemTableSortButtons/ItemTableSortButtons.md
@@ -0,0 +1,68 @@
+The ItemTableSortButtons are used to sort in ascending or descending order based on which button is selected. It is to be used with the [ItemTable](/#/Components/ItemTable).
+
+## Default Usage
+```jsx
+import React, { useState, useEffect } from "react";
+import { Paper, TableCell, } from "@material-ui/core";
+import ItemTableFilter from "../ItemTableFilter/";
+
+
+
+
+<TableCell component={Paper}>
+<ItemTableFilter label="Queue"/>
+<ItemTableSortButtons/>
+</TableCell>
+
+
+```
+```jsx static
+<ItemTableSortButtons sortDirection="sortDirection" sortAscArrowProps={someObject} sortDescArrowProps={someObject} />
+
+```
+Used without any props, the ItemTableSort will display arrows with default styling.
+
+
+## Sorting by Ascending
+If the `sortDirection` prop is passed `asc`, the ItemTableSortButtons will display the active styling for the ascending arrow. If a onClick function is present the table will run that function on button click
+```jsx
+import React, { useState, useEffect } from "react";
+import { Paper, TableCell, } from "@material-ui/core";
+import ItemTableFilter from "../ItemTableFilter/";
+
+
+
+
+<TableCell component={Paper}>
+<ItemTableFilter label="Queue"/>
+<ItemTableSortButtons sortDirection="asc" />
+</TableCell>
+
+
+```
+```jsx static
+<ItemTableSortButtons sortDirection="asc"/>
+```
+## Sorting by Descending
+If the `sortDirection` prop is passed `desc`, the ItemTableSortButtons will display the active styling for the descending arrow. If a onClick function is present the table will run that function on button click
+```jsx
+import React, { useState, useEffect } from "react";
+import { Paper, TableCell, } from "@material-ui/core";
+import ItemTableFilter from "../ItemTableFilter/";
+
+
+
+
+<TableCell component={Paper}>
+<ItemTableFilter label="Queue"/>
+<ItemTableSortButtons sortDirection="desc" />
+</TableCell>
+
+
+```
+```jsx static
+<ItemTableSortButtons sortDirection="desc"/>
+```
+
+
+
diff --git a/src/components/ItemTableSortButtons/index.js b/src/components/ItemTableSortButtons/index.js
new file mode 100644
index 0000000..390adb0
--- /dev/null
+++ b/src/components/ItemTableSortButtons/index.js
@@ -0,0 +1,3 @@
+import ItemtTableSortButtons from './ItemTableSortButtons'
+
+export default ItemtTableSortButtons;
\ No newline at end of file