diff --git a/src/components/root/Pages/TimeSlotHelper.js b/src/components/root/Pages/TimeSlotHelper.js
index 9b97cb1..e324ac6 100644
--- a/src/components/root/Pages/TimeSlotHelper.js
+++ b/src/components/root/Pages/TimeSlotHelper.js
@@ -14,15 +14,15 @@ class GenericList extends Component {
     super(props);
     this.state = {
       error: false,
-      timeslots: [],
+
       bookedslots: [],
     };
   }
 
   componentDidMount() {
-    callAPI.get("/gettimeslots/").then((response) => {
+    callAPI.get("/bookedslots/").then((response) => {
       this.setState({
-        timeslots: response.data,
+        bookedslots: response.data,
       });
     });
   }
@@ -30,11 +30,7 @@ class GenericList extends Component {
   renderItems() {
     if (!this.state.error) {
       return (
-        <TimeSlots
-          timeSlots={this.state.timeslots}
-          bookedSlots={this.state.bookedslots}
-          key={this.state.timeslots}
-        />
+        <TimeSlots booked={this.state.bookedslots} key={this.state.error} />
       );
     } else {
       return <Error />;
@@ -46,9 +42,3 @@ class GenericList extends Component {
   }
 }
 export default GenericList;
-
-// if (this.state.timeslots > 0) {
-//   else {
-//     return <Error />;
-//   }
-// }
diff --git a/src/components/root/common/Tables/TimeSlots.js b/src/components/root/common/Tables/TimeSlots.js
index 347cf42..1d2bf5a 100644
--- a/src/components/root/common/Tables/TimeSlots.js
+++ b/src/components/root/common/Tables/TimeSlots.js
@@ -1,132 +1,74 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import BootstrapTable from "react-bootstrap-table-next";
-import paginationFactory from "react-bootstrap-table2-paginator";
-import * as ReactBootstrap from "react-bootstrap";
-import filterFactory from "react-bootstrap-table2-filter";
-import ToolkitProvider, {
-  Search,
-  CSVExport,
-} from "react-bootstrap-table2-toolkit";
 
-// notes
-//
+import ToolkitProvider from "react-bootstrap-table2-toolkit";
+
+// Main table for the Historical migrations tab,
+// receives all API information and displays as a table with a searchbox
 
 const TimeSlots = (props) => {
-  const [list, setList, setTimeSlots, setBookedSlots] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const { SearchBar } = Search;
-  const { ExportCSVButton } = CSVExport;
-  const sizePerPageRenderer = ({
-    options,
-    currSizePerPage,
-    onSizePerPageChange,
-  }) => (
-    <div className="btn-group" role="group">
-      {options.map((option) => {
-        const isSelect = currSizePerPage === `${option.page}`;
-        return (
-          <button
-            key={option.text}
-            type="button"
-            onClick={() => onSizePerPageChange(option.page)}
-            className={`btn ${isSelect ? "btn-secondary" : "btn-success"}`}
-          >
-            {option.text}
-          </button>
-        );
-      })}
-    </div>
-  );
-
-  const getListData = async () => {
-    try {
-      const setList = await props.setList;
-      setList();
-      setLoading(true);
-    } catch (e) {
-      console.log(e);
-    }
-  };
-
-  const options = {
-    // paginationSize: 4,
-    // pageStartIndex: 0,
-    // alwaysShowAllBtns: true, // Always show next and previous button
-    // withFirstAndLast: false, // Hide the going to First and Last page button
-    // hideSizePerPage: true, // Hide the sizePerPage dropdown always
-    // hidePageListOnlyOnePage: true, // Hide the pagination list when only one page
-    // firstPageText: "First",
-    // prePageText: "Back",
-    nextPageText: "Next",
-    lastPageText: "Last",
-    // nextPageTitle: "First page",
-    // prePageTitle: "Pre page",
-    // firstPageTitle: "Next page",
-    // lastPageTitle: "Last page",
-    // showTotal: true,
-    // disablePageTitle: true,
-    // sizePerPageList: [
-    //   {
-    //     text: "50",
-    //     value: 50,
-    //   },
-    //   {
-    //     text: "100",
-    //     value: 100,
-    //   },
-    // ],
-    sizePerPageRenderer, // A numeric array is also available. the purpose of above example is custom the text
-  };
+  let date = new Date(); // today
+  let yesterday =
+    date.getDate() - 1 + date.toLocaleDateString("en-AU").slice(2);
+  let today = date.getDate() + date.toLocaleDateString("en-AU").slice(2);
+  let tomorrow = date.getDate() + 1 + date.toLocaleDateString("en-AU").slice(2);
+  let dayafter = date.getDate() + 2 + date.toLocaleDateString("en-AU").slice(2);
+  let dayafter2 =
+    date.getDate() + 3 + date.toLocaleDateString("en-AU").slice(2);
 
   const columns = [
-    { dataField: "bookedSlots", text: "bookedslots", sort: true },
-    { dataField: "timeSlots", text: "timeslots", sort: true },
+    {
+      dataField: "timeslot",
+      text: "timeslot/date",
+    },
+    {
+      dataField: "yesterday",
+      text: yesterday,
+    },
+    {
+      dataField: "today",
+      text: "TODAY",
+      style: { backgroundColor: "#9e9e9e" },
+    },
+    {
+      dataField: "tomorrow",
+      text: tomorrow,
+    },
+    {
+      dataField: "2days",
+      text: dayafter,
+    },
+    {
+      dataField: "3days",
+      text: dayafter2,
+    },
   ];
 
-  useEffect(() => {
-    getListData();
-  }, []);
-
   return (
-    <div>
-      {loading ? (
-        <ToolkitProvider
-          keyField="name"
-          data={list}
-          columns={columns}
-          search
-          exportCSV
-          key={columns.id}
-          keyField="id"
-        >
-          {(props) => (
-            <div>
-              <div className="serSec">
-                <h3 className="hdrOne"></h3>
-                <SearchBar {...props.searchProps} key={columns} />
-              </div>
-
-              <div className="table-responsive">
-                <BootstrapTable
-                  {...props.baseProps}
-                  filter={filterFactory()}
-                  pagination={paginationFactory(options)}
-                  striped
-                  hover
-                  condensed
-                  key={columns.id}
-                />
-              </div>
-              <ExportCSVButton {...props.csvProps} key={columns}>
-                Export CSV!!
-              </ExportCSVButton>
-            </div>
-          )}
-        </ToolkitProvider>
-      ) : (
-        <ReactBootstrap.Spinner animation="border" />
+    <ToolkitProvider
+      data={props.booked}
+      keyField="timeslot"
+      key={columns.text}
+      columns={columns}
+    >
+      {(props) => (
+        <div className="py-4">
+          <div
+            id="datatable-basic_filter"
+            className="dataTables_filter px-4 pb-1"
+          ></div>
+          <BootstrapTable
+            {...props.baseProps}
+            bootstrap4={true}
+            bordered={false}
+            loading={true}
+            striped
+            bordered
+            hover
+          />
+        </div>
       )}
-    </div>
+    </ToolkitProvider>
   );
 };