diff --git a/src/App.js b/src/App.js
index 4046c32..e4968de 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { ThemeProvider } from "@material-ui/core/styles";
 import clsx from "clsx";
 import { Box, makeStyles, Paper } from "@material-ui/core";
@@ -7,7 +7,6 @@ import ItemTableAppBar from "./components/ItemTableAppBar/";
 import ItemTable from "./components/ItemTable/";
 import ItemViewAppBar from "./components/ItemViewAppBar/";
 import ItemView from "./components/ItemView/";
-import ItemTable_ReactTable from "./components/ItemTable/ItemTable-ReactTable";
 
 function App(){
 	const [darkMode, setDarkMode] = useState(false);
@@ -56,8 +55,7 @@ function App(){
 				<Box display="flex">
 					<Box className={classes.leftCol}>
 						<ItemTableAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} theme={theme}/>
-						{/* <ItemTable setActiveItem={setActiveItem} setSidebarOpen={setSidebarOpen}/> */}
-						<ItemTable_ReactTable />
+						<ItemTable />
 					</Box>
 					<Box className={clsx(classes.rightCol, sidebarOpen && classes.rightColShift)}>
 						<ItemViewAppBar title={activeItem["queue"] + " " + activeItem["number"]} setSidebarOpen={setSidebarOpen} />
diff --git a/src/components/ItemTable/ItemTable-ReactTable.js b/src/components/ItemTable/ItemTable-ReactTable.js
deleted file mode 100644
index 9606f18..0000000
--- a/src/components/ItemTable/ItemTable-ReactTable.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import React, { useState, useEffect, useMemo } from "react";
-import { useTable, useFilters, useBlockLayout, useFlexLayout, useSortBy } from "react-table";
-import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper, TableSortLabel } from "@material-ui/core";
-import ItemTableFilter from "../ItemTableFilter/"
-
-export default function ItemTable_ReactTable() {
-
-    const styles = theme => ({
-        width:50,
-        // Fully visible for active icons
-        activeSortIcon: {
-          opacity: 1,
-        },
-        // Half visible for inactive icons
-        inactiveSortIcon: {
-          opacity: 0.4,
-        },
-      });
-
-    const [data, setData] = useState([]);
-    useEffect(() => {
-        fetch("/api/ce").then(apiResponse => apiResponse.json()).then(queue => {
-            setData(queue.items)
-        })
-    }, [])
-
-    const columns = React.useMemo(
-        () => [
-            { Header: 'Queue', accessor: 'queue', },
-            { Header: 'Item #', accessor: 'number' },
-            { Header: 'Assigned To', accessor: 'assignedTo' },
-            { Header: 'Subject', accessor: 'subject' },
-            { Header: 'Status', accessor: 'status', },
-            { Header: 'Priority', accessor: 'priority' },
-            { Header: 'Last Updated', accessor: 'lastUpdated' },
-            { Header: 'Department', accessor: 'department' },
-            { Header: 'Building', accessor: 'building' },
-            { Header: 'Date Received', accessor: 'dateReceived' },
-        ], []);
-
-    const { getTableProps,
-        getTableBodyProps,
-        headerGroups,
-        rows,
-        prepareRow
-    } = useTable(
-        {
-            columns,
-            defaultCanSort: true,
-            data,
-            defaultColumn: {
-                Filter: ({ column: { Header, setFilter } }) => {
-                    return (
-                        <ItemTableFilter
-                            label={Header}
-                            onChange={(event) => setFilter(event.target.value)}
-                        />
-                    );
-                }
-            }
-        },
-        useFilters,
-        useFlexLayout,
-        useSortBy,
-    );
-
-    const [orderBy, setOrderBy] = useState("");
-
-    return (
-        <TableContainer component={Paper}>
-            <Table {...getTableProps} aria-label="simple table">
-                <TableHead>
-                    {headerGroups.map(headerGroup => (
-                        <TableRow {...headerGroup.getHeaderGroupProps()}>
-                            {headerGroup.headers.map(column => (
-                                <TableCell {...column.getHeaderProps()}>{column.render("Filter")}
-                                    <TableSortLabel
-                                        // active={column.Header === orderBy}
-                                        active
-                                        direction={column.isSorted ? column.isSortedDesc ? 'asc' :'desc': 'asc'}
-                                        {...column.getHeaderProps(column.getSortByToggleProps())}
-                                    >
-
-                                    </TableSortLabel>
-
-                                </TableCell>
-
-
-                            ))}
-                        </TableRow>
-                    ))}
-                </TableHead>
-                <TableBody {...getTableBodyProps()}>
-                    {rows.map((row, i) => {
-                        prepareRow(row);
-                        return (
-                            <TableRow {...row.getRowProps()}>
-                                {row.cells.map(cell => (
-                                    <TableCell {...cell.getCellProps()}>
-                                        {cell.render("Cell")}
-                                    </TableCell>
-                                ))}
-                            </TableRow>
-                        );
-                    })}
-                </TableBody>
-            </Table>
-        </TableContainer>
-    );
-
-}
\ No newline at end of file
diff --git a/src/components/ItemTable/ItemTable.js b/src/components/ItemTable/ItemTable.js
index 66782da..05a054d 100644
--- a/src/components/ItemTable/ItemTable.js
+++ b/src/components/ItemTable/ItemTable.js
@@ -1,123 +1,85 @@
-import React, { useState, useEffect } from 'react';
-import PropTypes from 'prop-types'
-import MUIDataTable from 'mui-datatables';
-
-
-export default function ItemTable({ setActiveItem, setSidebarOpen }) {
-
-	const columns = [
-		{
-			name: "queue",
-			label: "Queue",
-		},
-		{
-			name: "number",
-			label: "Item #",
-		}, {
-			name: "userAlias",
-			label: "From",
-		}, {
-			name: "assignedTo",
-			label: "Assigned To",
-		}, {
-			name: "subject",
-			label: "Subject",
-		}, {
-			name: "status",
-			label: "Stauts",
-		}, {
-			name: "priority",
-			label: "Priority",
-		}, {
-			name: "lastUpdated",
-			label: "Last Updated",
-		}, {
-			name: "department",
-			label: "Department",
-		}, {
-			name: "building",
-			label: "Building",
-		}, {
-			name: "dateReceived",
-			label: "Date Received",
-		},
-		// "queue",
-		// "Item #",
-		// "From",
-		// "Assigned to",
-		// "Subject",
-		// "Status",
-		// "Priority",
-		// "Last Updated",
-		// "Department",
-		// "Building",
-		// "Date Received",
-	]
-
-	const [data, setData] = useState([])
-
-	useEffect(() => {
-		fetch("/api/ce").then(res => res.json()).then(queue => {
-			setData(queue.items)
-		})
-	}, [])
-
-
-
-
-
-	const options = {
-		"filtering": true,
-		"pagination": false,
-		"filterType": "textField",
-		"search": false,
-		"download": false,
-		"print": false,
-		"draggable": false,
-		"padding": "dense",
-		"responsive": "vertical",
-		"selectableRowsHeader": false,
-		"selectableRowsHideCheckboxes": true,
-		"selectableRows":"single",		
-		"selectableRowsOnClick":true,
-		"onRowSelection": (event, rowData) => {
-			setActiveItem(rowData);
-			setSidebarOpen(true);
-			console.log(event);
-			console.log(rowData);
-		},
-		
-
-	}
-
-
-
-	return (
-		<>
-			<MUIDataTable
-				title={"Demo Table"}
-			
-				data={data}
-				options={options}
-				columns={columns}
-
-
-			/>
-
-
-		</>
-	);
-}
-
-
-
-
-
-
-ItemTable.propTypes = {
-	/** Function to set active item on row click. */
-	"setActiveItem": PropTypes.func.isRequired,
-	/** Function to toggle sidebar on row click. */
-	"setSidebarOpen": PropTypes.func.isRequired
-}
-
+import React, { useState, useEffect } from "react";
+import { useTable, useFilters, useFlexLayout } from "react-table";
+import { Table, TableBody, TableCell, TableHead, TableRow, TableContainer, Paper } from "@material-ui/core";
+import ItemTableFilter from "../ItemTableFilter/"
+
+export default function ItemTable() {
+
+    const [data, setData] = useState([]);
+    useEffect(() => {
+        fetch("/api/ce").then(apiResponse => apiResponse.json()).then(queue => {
+            setData(queue.items)
+        })
+    }, [])
+
+    const columns = React.useMemo(
+        () => [
+            { Header: 'Queue', accessor: 'queue', },
+            { Header: 'Item #', accessor: 'number' },
+            { Header: 'Assigned To', accessor: 'assignedTo' },
+            { Header: 'Subject', accessor: 'subject' },
+            { Header: 'Status', accessor: 'status', },
+            { Header: 'Priority', accessor: 'priority' },
+            { Header: 'Last Updated', accessor: 'lastUpdated' },
+            { Header: 'Department', accessor: 'department' },
+            { Header: 'Building', accessor: 'building' },
+            { Header: 'Date Received', accessor: 'dateReceived' },
+        ], []);
+
+    const { getTableProps,
+        getTableBodyProps,
+        headerGroups,
+        rows,
+        prepareRow
+    } = useTable(
+        {
+            columns,
+            data,
+            defaultColumn: {
+                Filter: ({ column: { Header, setFilter } }) => {
+                    return (
+                        <ItemTableFilter
+                            label={Header}
+                            onChange={(event) => setFilter(event.target.value)}
+                        />
+                    );
+                }
+            }
+        },
+        useFilters,
+        useFlexLayout
+    );
+
+    return (
+        <TableContainer component={Paper}>
+            <Table {...getTableProps} aria-label="simple table">
+                <TableHead>
+                    {headerGroups.map(headerGroup => (
+                        <TableRow {...headerGroup.getHeaderGroupProps()}>
+                            {headerGroup.headers.map(column => (
+                                <TableCell {...column.getHeaderProps()}>
+                                    {column.render("Filter")}
+                                </TableCell>
+                            ))}
+                        </TableRow>
+                    ))}
+                </TableHead>
+                <TableBody {...getTableBodyProps()}>
+                    {rows.map((row, i) => {
+                        prepareRow(row);
+                        return (
+                            <TableRow {...row.getRowProps()}>
+                                {row.cells.map(cell => (
+                                    <TableCell {...cell.getCellProps()}>
+                                        {cell.render("Cell")}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        );
+                    })}
+                </TableBody>
+            </Table>
+        </TableContainer>
+    );
+
+}
\ No newline at end of file
diff --git a/src/components/ItemTableFilter/ItemTableFilter.md b/src/components/ItemTableFilter/ItemTableFilter.md
index 2397c53..d83faec 100644
--- a/src/components/ItemTableFilter/ItemTableFilter.md
+++ b/src/components/ItemTableFilter/ItemTableFilter.md
@@ -1,24 +1,22 @@
+This ItemTableFilter double as a column header and entry box for filtering in a column. At its core, it is a input element of type search.
 
 ```jsx
-import React from 'react';
-import PropTypes from 'prop-types';
-import { TextField } from "@material-ui/core";
+import { Paper, makeStyles } from "@material-ui/core";
+import ItemTableFilter from "./ItemTableFilter";
 
+const useStyles = makeStyles({
+    "paper": {
+        width: "200px",
+    }
+});
 
-        <>
-            <TextField
-                label="Name"
-                onChange={(event) => null}
-                type="search"
-                size="small"
-                color="secondary"
-                variant="outlined"
-                fullWidth
-            />
-        </>
+const classes = useStyles();
 
+<Paper classes={{root: classes.paper}}>
+    <ItemTableFilter label="Search" onChange={() => null} />
+</Paper>
 ```
 
 ```jsx static
-<ItemTable label={Header} onChange={(event) => setFilter(event.target.value)} />
+<ItemTableFilter label="Search" onChange={() => null} />
 ```
\ No newline at end of file