diff --git a/back-end/vercel.json b/back-end/vercel.json
index 88bffe0..b5f83cb 100644
--- a/back-end/vercel.json
+++ b/back-end/vercel.json
@@ -14,5 +14,16 @@
   ],
   "env": {
     "NODE_ENV": "production"
-  }
+  },
+  "headers": [
+    {
+      "source": "/api/(.*)",
+      "headers": [
+        { "key": "Access-Control-Allow-Credentials", "value": "true" },
+        { "key": "Access-Control-Allow-Origin", "value": "*" },
+        { "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
+        { "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" }
+      ]
+    }
+  ]
 }
diff --git a/front-end/src/dashboard/Dashboard.js b/front-end/src/dashboard/Dashboard.js
index aa458a6..aa4ceca 100644
--- a/front-end/src/dashboard/Dashboard.js
+++ b/front-end/src/dashboard/Dashboard.js
@@ -10,7 +10,7 @@ import { today, previous, next } from "../utils/date-time";
  *  the date for which the user wants to view reservations.
  * @returns {JSX.Element}
  */
-function Dashboard({rootReservations}) {
+function Dashboard() {
 
   const [allReservations, setAllReservations] = useState([])
   const [reservations, setReservations] = useState([])
@@ -194,4 +194,4 @@ function Dashboard({rootReservations}) {
  
 }
 
-export default Dashboard
+export default Dashboard
\ No newline at end of file
diff --git a/front-end/src/layout/RootRoutes.js b/front-end/src/layout/RootRoutes.js
index a80b026..5415741 100644
--- a/front-end/src/layout/RootRoutes.js
+++ b/front-end/src/layout/RootRoutes.js
@@ -4,7 +4,7 @@ import Dashboard from "../dashboard/Dashboard";
 import NotFound from "./NotFound";
 import { today } from "../utils/date-time";
 import CreateEditReservation from "./CreateEditReservation";
-import { listReservations } from "../utils/api";
+import { listReservations, listTables } from "../utils/api";
 import CreateEditTable from "./CreateEditTable";
 import Search from "./Search";
 import AssignTable from "./AssignTable"
@@ -18,34 +18,49 @@ import AssignTable from "./AssignTable"
  */
 function RootRoutes() {
   const [rootReservations, setRootReservations] = useState([])
+  const [rootTables, setRootTables] = useState([])
 
-    useEffect(() => {
-      const abortController = new AbortController();
-      
-      async function fetchReservations(){
-        try{
-          const fetchedReservations = await listReservations(abortController.signal)
-          setRootReservations(fetchedReservations)
-        } catch (error){
-          console.error("Error fetching reservations:", error)
-        }
+  useEffect(() => {
+    const abortController = new AbortController();
+    
+    async function fetchReservations(){
+      try{
+        const fetchedReservations = await listReservations(abortController.signal)
+        setRootReservations(fetchedReservations)
+      } catch (error){
+        console.error("Error fetching reservations:", error)
       }
-      fetchReservations()
-      return () => abortController.abort();
+    }
+    fetchReservations()
+    return () => abortController.abort();
 
-    }, [setRootReservations])
-    
+  }, [setRootReservations])
+
+  useEffect(() => {
+    const abortController = new AbortController();
+  
+    async function loadTables() {
+      try {
+        const foundTables = await listTables(abortController.signal);
+        setRootTables(foundTables);
+      } catch (error) {
+        console.error("Error fetching tables:", error)
+      }
+    }
+    loadTables();
+    return () => abortController.abort();
+  }, [setRootTables]);
+  
   return (
       <Routes>
-        <Route path="/" element={<Dashboard rootReservations={rootReservations} />} />
-        <Route path ="/search" element={<Search rootReservations={rootReservations}/>} />
-        <Route path="/reservations" element={<Dashboard rootReservations={rootReservations} />} />
+        <Route path="/" element={<Dashboard rootReservations={rootReservations} rootTables={rootTables} />} />
+        <Route path ="/search" element={<Search rootReservations={rootReservations} rootTables={rootTables} />} />
         <Route path="/reservations/new" element={<CreateEditReservation />} />
-        <Route path="/reservations/:reservationId/seat" element={<AssignTable rootReservations={rootReservations} />} />    
+        <Route path="/reservations/:reservationId/seat" element={<AssignTable rootReservations={rootReservations} rootTables={rootTables} />} />    
         <Route path="/reservations/:reservationId/edit" element={<CreateEditReservation/>} />
         <Route path="/tables/new" element={<CreateEditTable />} />
-        <Route path="/tables/:table_id/seat" element={<CreateEditTable/>}/>
-        <Route path="/dashboard/*" element={<Dashboard rootReservations={rootReservations} date={today()} />} />
+        <Route path="/tables/:table_id/seat" element={<CreateEditTable />}/>
+        <Route path="/dashboard/*" element={<Dashboard rootReservations={rootReservations} date={today()} rootTables={rootTables} />} />
         <Route path="*" element={<NotFound />} />
       </Routes>
   );