diff --git a/ocfstatic b/ocfstatic
new file mode 160000
index 0000000..8b851f5
--- /dev/null
+++ b/ocfstatic
@@ -0,0 +1 @@
+Subproject commit 8b851f51b2614c669ffdc42df99ef0bfe48a5064
diff --git a/src/pages/staff-hours.tsx b/src/pages/staff-hours.tsx
index d229449..3a2380e 100644
--- a/src/pages/staff-hours.tsx
+++ b/src/pages/staff-hours.tsx
@@ -71,16 +71,158 @@ function parseTime(time: string) {
   return [sHour, sMin, eHour, eMin]
 }
 
-const holidays = [
-  {
-    title: "Holiday",
-    allDay: false,
-    start: new Date(2023, 9, 12, 0, 0, 0, 0),
-    end: new Date(2023, 9, 12, 23, 0, 0, 0),
-  },
-]
-
 const StaffHoursPage = () => {
+  function ocfHours(i: number, data: typeof hours) {
+    const day = moment().startOf("isoWeek").add(i, "days")
+    if (data?.open != undefined && data?.close != undefined) {
+      return {
+        title: "OCF Open",
+        allDay: false,
+        start: new Date(
+          day.year(),
+          day.month(),
+          day.date(),
+          parseInt(data.open.split(":")[0]),
+          parseInt(data.open.split(":")[1]),
+          0,
+          0,
+        ),
+        end: new Date(
+          day.year(),
+          day.month(),
+          day.date(),
+          parseInt(data.close.split(":")[0]),
+          parseInt(data.close.split(":")[1]),
+          0,
+          0,
+        ),
+      }
+    } else {
+      return {
+        title: "OCF Closed All Day",
+        allDay: false,
+        start: new Date(day.year(), day.month(), day.date(), 0, 0, 0, 0),
+        end: new Date(day.year(), day.month(), day.date(), 23, 59, 0, 0),
+      }
+    }
+  }
+  const weeks_Data = []
+  const isoDate = moment()
+    .startOf("isoWeek")
+    .add(0, "days")
+    .format("YYYY-MM-DD")
+  const { data: hours } = useApiRoute("/lab/hours/{date}", {
+    path: { date: isoDate.toString() },
+  })
+  weeks_Data.push(ocfHours(0, hours))
+  const isoDate1 = moment()
+    .startOf("isoWeek")
+    .add(1, "days")
+    .format("YYYY-MM-DD")
+  const { data: hours1 } = useApiRoute("/lab/hours/{date}", {
+    path: { date: isoDate1.toString() },
+  })
+  weeks_Data.push(ocfHours(1, hours1))
+  const isoDate2 = moment()
+    .startOf("isoWeek")
+    .add(2, "days")
+    .format("YYYY-MM-DD")
+  const { data: hours2 } = useApiRoute("/lab/hours/{date}", {
+    path: { date: isoDate2.toString() },
+  })
+  weeks_Data.push(ocfHours(2, hours2))
+  const isoDate3 = moment()
+    .startOf("isoWeek")
+    .add(3, "days")
+    .format("YYYY-MM-DD")
+  const { data: hours3 } = useApiRoute("/lab/hours/{date}", {
+    path: { date: isoDate3.toString() },
+  })
+  weeks_Data.push(ocfHours(3, hours3))
+  const isoDate4 = moment()
+    .startOf("isoWeek")
+    .add(4, "days")
+    .format("YYYY-MM-DD")
+  const { data: hours4 } = useApiRoute("/lab/hours/{date}", {
+    path: { date: isoDate4.toString() },
+  })
+  weeks_Data.push(ocfHours(4, hours4))
+  const isoDate5 = moment()
+    .startOf("isoWeek")
+    .add(5, "days")
+    .format("YYYY-MM-DD")
+  const { data: hours5 } = useApiRoute("/lab/hours/{date}", {
+    path: { date: isoDate5.toString() },
+  })
+  weeks_Data.push(ocfHours(5, hours5))
+  const isoDate6 = moment()
+    .startOf("isoWeek")
+    .add(6, "days")
+    .format("YYYY-MM-DD")
+  const { data: hours6 } = useApiRoute("/lab/hours/{date}", {
+    path: { date: isoDate6.toString() },
+  })
+  weeks_Data.push(ocfHours(6, hours6))
+  const isoDate7 = moment()
+    .startOf("isoWeek")
+    .add(7, "days")
+    .format("YYYY-MM-DD")
+  const { data: hours7 } = useApiRoute("/lab/hours/{date}", {
+    path: { date: isoDate7.toString() },
+  })
+  weeks_Data.push(ocfHours(7, hours7))
+  const isoDate8 = moment()
+    .startOf("isoWeek")
+    .add(8, "days")
+    .format("YYYY-MM-DD")
+  const { data: hours8 } = useApiRoute("/lab/hours/{date}", {
+    path: { date: isoDate8.toString() },
+  })
+  weeks_Data.push(ocfHours(8, hours8))
+  const isoDate9 = moment()
+    .startOf("isoWeek")
+    .add(9, "days")
+    .format("YYYY-MM-DD")
+  const { data: hours9 } = useApiRoute("/lab/hours/{date}", {
+    path: { date: isoDate9.toString() },
+  })
+  weeks_Data.push(ocfHours(10, hours9))
+  const isoDate10 = moment()
+    .startOf("isoWeek")
+    .add(10, "days")
+    .format("YYYY-MM-DD")
+  const { data: hours10 } = useApiRoute("/lab/hours/{date}", {
+    path: { date: isoDate10.toString() },
+  })
+  weeks_Data.push(ocfHours(10, hours10))
+  const isoDate11 = moment()
+    .startOf("isoWeek")
+    .add(11, "days")
+    .format("YYYY-MM-DD")
+  const { data: hours11 } = useApiRoute("/lab/hours/{date}", {
+    path: { date: isoDate11.toString() },
+  })
+  weeks_Data.push(ocfHours(11, hours11))
+  const isoDate12 = moment()
+    .startOf("isoWeek")
+    .add(12, "days")
+    .format("YYYY-MM-DD")
+  const { data: hours12 } = useApiRoute("/lab/hours/{date}", {
+    path: { date: isoDate12.toString() },
+  })
+  weeks_Data.push(ocfHours(12, hours12))
+
+  /* let OCF_hours = [] // React Hook "useApiRoute" may be executed more than once. Possibly because it is called in a loop. React Hooks must be called in the exact same order in every component render 
+  for (let i = 0; i < 21; i++) {
+    const isoDate12 = moment()
+    .startOf("isoWeek")
+    .add(i, "days")
+    .format("YYYY-MM-DD")
+    const { data: hours12 } = useApiRoute("/lab/hours/{date}", {
+    path: { date: isoDate12.toString() },
+    })
+    OCF_hours.push(ocfHours(i, hours12))
+  } */
   const { data: staff } = useApiRoute("/staff_hours")
   const staffHours =
     staff &&
@@ -96,7 +238,7 @@ const StaffHoursPage = () => {
             newDay.month(),
             newDay.date(),
             times[0],
-            parseInt(staff.time.split(":")[1]),
+            times[1],
             0,
             0,
           ),
@@ -105,7 +247,7 @@ const StaffHoursPage = () => {
             newDay.month(),
             newDay.date(),
             times[2],
-            0,
+            times[3],
             0,
             0,
           ),
@@ -119,7 +261,7 @@ const StaffHoursPage = () => {
             newDay.month(),
             newDay.date(),
             times[0],
-            parseInt(staff.time.split(":")[1]),
+            times[1],
             0,
             0,
           ),
@@ -128,7 +270,7 @@ const StaffHoursPage = () => {
             newDay.month(),
             newDay.date(),
             times[2],
-            0,
+            times[3],
             0,
             0,
           ),
@@ -142,6 +284,11 @@ const StaffHoursPage = () => {
           backgroundColor: "#000",
         },
       }),
+      ...(event.title?.toString().includes("OCF Closed") && {
+        style: {
+          backgroundColor: "#000",
+        },
+      }),
     }),
     [],
   )
@@ -153,6 +300,7 @@ const StaffHoursPage = () => {
     }),
     [],
   )
+
   const heroRef = useRef<HTMLDivElement>(null)
   return (
     <Layout>
@@ -173,12 +321,14 @@ const StaffHoursPage = () => {
           borderRadius={4}
         >
           <Calendar
-            backgroundEvents={holidays}
+            min={new Date(0, 0, 0, 7, 0, 0)}
+            max={new Date(0, 0, 0, 23, 0, 0)}
             dayLayoutAlgorithm={"no-overlap"}
             defaultDate={defaultDate}
             defaultView={Views.WEEK}
             eventPropGetter={eventPropGetter}
             events={staffHours}
+            backgroundEvents={weeks_Data}
             localizer={localizer}
             onSelectEvent={giveEvent}
             views={[Views.WEEK, Views.DAY]}
diff --git a/src/utils/api.ts b/src/utils/api.ts
index 22cca07..c51666c 100644
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@@ -65,7 +65,7 @@ export function getSWRKeyForPath<
   if ("path" in params) {
     for (const param in params.path) {
       pathReplaced = pathReplaced.replaceAll(
-        new RegExp(`\\{${param}\\}`),
+        new RegExp(`\\{${param}\\}`, "g"),
         params.path[param].toString(),
       )
     }