diff --git a/frontend/mockdata/mockData.ts b/frontend/mockdata/mockData.ts
index bac4ca8c..7552d76b 100644
--- a/frontend/mockdata/mockData.ts
+++ b/frontend/mockdata/mockData.ts
@@ -4,6 +4,7 @@ import {
   Degree,
   DepartmentReadModel,
   EngagementPerCustomerReadModel,
+  Forecast,
   OrganisationReadModel,
   WeeklyBookingReadModel,
 } from "@/api-types";
@@ -19,6 +20,54 @@ const MockWeeklyBookingReadModel: WeeklyBookingReadModel = {
   totalExcludableAbsence: 0,
   totalNotStartedOrQuit: 0,
 };
+const mockForecast1: Forecast = {
+  id: 1,
+  month: 0,
+  year: 2025,
+  forecastValue: 80,
+  hasBeenChanged: false,
+  valueAddedManually: 0,
+};
+const mockForecast2: Forecast = {
+  id: 2,
+  month: 1,
+  year: 2025,
+  forecastValue: 80,
+  hasBeenChanged: false,
+  valueAddedManually: 0,
+};
+const mockForecast3: Forecast = {
+  id: 3,
+  month: 2,
+  year: 2025,
+  forecastValue: 50,
+  hasBeenChanged: false,
+  valueAddedManually: 0,
+};
+const mockForecast4: Forecast = {
+  id: 4,
+  month: 3,
+  year: 2025,
+  forecastValue: 100,
+  hasBeenChanged: false,
+  valueAddedManually: 0,
+};
+const mockForecast5: Forecast = {
+  id: 5,
+  month: 4,
+  year: 2025,
+  forecastValue: 0,
+  hasBeenChanged: true,
+  valueAddedManually: 50,
+};
+const mockForecast6: Forecast = {
+  id: 6,
+  month: 5,
+  year: 2025,
+  forecastValue: 70,
+  hasBeenChanged: true,
+  valueAddedManually: 10,
+};
 
 export const MockConsultants: ConsultantReadModel[] = [
   {
@@ -41,6 +90,14 @@ export const MockConsultants: ConsultantReadModel[] = [
     isOccupied: true,
     graduationYear: 2010,
     degree: Degree.Bachelor,
+    forecasts: [
+      mockForecast1,
+      mockForecast2,
+      mockForecast3,
+      mockForecast4,
+      mockForecast5,
+      mockForecast6,
+    ],
   },
 ];
 
diff --git a/frontend/src/api-types.ts b/frontend/src/api-types.ts
index b66d8d92..d4bfa062 100644
--- a/frontend/src/api-types.ts
+++ b/frontend/src/api-types.ts
@@ -63,6 +63,16 @@ export interface ConsultantReadModel {
   isOccupied: boolean;
   imageUrl?: string;
   imageThumbUrl?: string;
+  forecasts?: Forecast[];
+}
+
+export interface Forecast {
+  id: number;
+  month: number;
+  year: number;
+  forecastValue: number;
+  hasBeenChanged: boolean;
+  valueAddedManually: number;
 }
 
 export interface ConsultantWriteModel {
diff --git a/frontend/src/components/Forecast/ForecastRows.tsx b/frontend/src/components/Forecast/ForecastRows.tsx
new file mode 100644
index 00000000..177321ff
--- /dev/null
+++ b/frontend/src/components/Forecast/ForecastRows.tsx
@@ -0,0 +1,291 @@
+"use client";
+import { ConsultantReadModel, ProjectWithCustomerModel } from "@/api-types";
+import React, { useContext, useEffect, useState } from "react";
+import { AlertCircle, CheckCircle, ChevronDown, Plus } from "react-feather";
+import { DetailedBookingRows } from "@/components/Staffing/DetailedBookingRows";
+import { WeekCell } from "@/components/Staffing/WeekCell";
+import { useModal } from "@/hooks/useModal";
+import { usePathname } from "next/navigation";
+import {
+  dayToWeek,
+  getBookingTypeFromProjectState,
+} from "../Staffing/EditEngagementHourModal/utils";
+import { useWeekSelectors } from "@/hooks/useWeekSelectors";
+import { setDetailedBookingHours } from "@/components/Staffing/DetailedBookingRows";
+import { FilteredContext } from "@/hooks/ConsultantFilterProvider";
+import { DateTime } from "luxon";
+import Image from "next/image";
+import { INTERNAL_CUSTOMER_NAME } from "../Staffing/helpers/utils";
+import { MonthCell } from "./MonthCell";
+
+export default function ForecastRows({
+  consultant,
+  numWorkHours,
+}: {
+  consultant: ConsultantReadModel;
+  numWorkHours: number;
+}) {
+  const [currentConsultant, setCurrentConsultant] =
+    useState<ConsultantReadModel>(consultant);
+  const [isListElementVisible, setIsListElementVisible] = useState(false);
+  const [isRowHovered, setIsRowHovered] = useState(false);
+  const [hoveredRowWeek, setHoveredRowWeek] = useState(-1);
+  const [isAddStaffingHovered, setIsAddStaffingHovered] = useState(false);
+  const [addNewRow, setAddNewRow] = useState(false);
+  const { weekList, setSelectedWeekSpan } = useWeekSelectors();
+  const { setIsDisabledHotkeys } = useContext(FilteredContext);
+  const { selectedWeekFilter, weekSpan } =
+    useContext(FilteredContext).activeFilters;
+
+  const [newWeekList, setNewWeekList] = useState<DateTime[]>(weekList);
+
+  useEffect(() => {
+    setSelectedWeekSpan(consultant.bookings.length);
+    setCurrentConsultant(consultant);
+    if (selectedWeekFilter) {
+      setNewWeekList([]);
+      Array.from({ length: weekSpan }).map((_, index) => {
+        setNewWeekList((old) => [
+          ...old,
+          DateTime.fromISO(
+            `${selectedWeekFilter?.year}-W${selectedWeekFilter?.weekNumber}`,
+          ).plus({ weeks: index }),
+        ]);
+      });
+    }
+  }, [consultant.bookings.length, consultant]);
+
+  const columnCount = currentConsultant.bookings.length ?? 0;
+
+  function toggleListElementVisibility() {
+    setIsListElementVisible((old) => !old);
+  }
+
+  const {
+    closeModal: closeChangeEngagementModal,
+    openModal: openChangeEngagementModal,
+    modalRef: changeEngagementModalRef,
+  } = useModal({
+    closeOnBackdropClick: false,
+  });
+
+  const [selectedProjectId, setSelectedProjectId] = useState<
+    number | undefined
+  >(undefined);
+  const [selectedProject, setSelectedProject] = useState<
+    ProjectWithCustomerModel | undefined
+  >(undefined);
+
+  const organisationUrl = usePathname().split("/")[1];
+
+  useEffect(() => {
+    async function fetchProject() {
+      const url = `/${organisationUrl}/bemanning/api/projects?projectId=${selectedProjectId}`;
+
+      try {
+        const data = await fetch(url, {
+          method: "get",
+        });
+        setSelectedProject((await data.json()) as ProjectWithCustomerModel);
+      } catch (e) {
+        console.error("Error updating staffing", e);
+      }
+    }
+    selectedProjectId && fetchProject();
+  }, [organisationUrl, selectedProjectId]);
+
+  function openEngagementAndSetID(id: number) {
+    setSelectedProjectId(id);
+    openChangeEngagementModal();
+  }
+
+  function onCloseEngagementModal() {
+    setSelectedProject(undefined);
+    setSelectedProjectId(undefined);
+  }
+
+  function handleNewEngagementCancelled() {
+    setAddNewRow(false);
+    setIsDisabledHotkeys(false);
+  }
+
+  async function handleNewEngagement(project: ProjectWithCustomerModel) {
+    setAddNewRow(false);
+    setIsDisabledHotkeys(false);
+    setSelectedProject(project);
+
+    if (
+      project !== undefined &&
+      !currentConsultant.detailedBooking.some(
+        (e) =>
+          e.bookingDetails.projectId === project.projectId &&
+          e.bookingDetails.type ===
+            getBookingTypeFromProjectState(project?.bookingType),
+      )
+    ) {
+      try {
+        const body = {
+          hours: 0,
+          bookingType: getBookingTypeFromProjectState(project?.bookingType),
+          organisationUrl: organisationUrl,
+          consultantId: currentConsultant.id,
+          bookingId: `${project?.projectId}`,
+          startWeek: dayToWeek(newWeekList[0]),
+        };
+        const res = await setDetailedBookingHours(body);
+
+        if (res) {
+          const tempCurrentConsultant = { ...currentConsultant };
+
+          const newDetailedBooking = res.detailedBooking.find(
+            (e) => e.bookingDetails.projectId === project.projectId,
+          );
+
+          if (newDetailedBooking) {
+            newDetailedBooking.hours = newWeekList.map((e) => {
+              return { week: dayToWeek(e), hours: 0 };
+            });
+            tempCurrentConsultant.detailedBooking.push(newDetailedBooking);
+            setCurrentConsultant(tempCurrentConsultant);
+          }
+        }
+      } catch (e) {
+        console.error("Error updating staffing", e);
+      }
+    }
+  }
+
+  return (
+    <>
+      <tr
+        className="h-[52px]"
+        onMouseEnter={() => setIsRowHovered(true)}
+        onMouseLeave={() => setIsRowHovered(false)}
+      >
+        <td
+          className={`border-l-2 ${
+            isListElementVisible
+              ? "border-l-secondary"
+              : isRowHovered
+              ? "border-l-primary"
+              : "border-l-primary/5"
+          } `}
+        >
+          {/* //utkommentert foreløpig, kan slettes om vi ikke skal ha mulighet til å utvide raden <button
+            className={`p-2 rounded-lg ml-2 hover:bg-primary hover:bg-opacity-10 ${
+              isListElementVisible && "rotate-180"
+            }`}
+            onClick={toggleListElementVisibility}
+          >
+            <ChevronDown className={`text-primary w-6 h-6`} />
+          </button> */}
+        </td>
+        <td>
+          <div className="flex justify-start gap-1 items-center">
+            <div className="flex flex-row justify-center self-center gap-2 w-3/12">
+              {consultant.imageThumbUrl ? (
+                <Image
+                  src={consultant.imageThumbUrl}
+                  alt={consultant.name}
+                  className="w-10 h-10 rounded-md self-center object-contain"
+                  width={32}
+                  height={32}
+                />
+              ) : (
+                <div className="w-10 h-10 rounded-md bg-primary"></div>
+              )}
+            </div>
+            <div className="flex flex-col gap-1 w-7/12 ">
+              <p
+                className={`text-black text-start ${
+                  isListElementVisible ? "normal-medium" : "normal"
+                }`}
+              >
+                {currentConsultant.name}
+              </p>
+              <p className="xsmall text-black/75 text-start">
+                {`${currentConsultant.yearsOfExperience} års erfaring`}
+              </p>
+            </div>
+          </div>
+        </td>
+        {currentConsultant.forecasts?.map((b, index) => (
+          <MonthCell
+            key={index}
+            hasBeenEdited={b.hasBeenChanged}
+            forecastValue={b.forecastValue + b.valueAddedManually}
+            month={b.month}
+            consultant={currentConsultant}
+            setHoveredRowWeek={setHoveredRowWeek}
+            hoveredRowWeek={hoveredRowWeek}
+            columnCount={columnCount}
+            isLastCol={index == currentConsultant.bookings.length - 1}
+            isSecondLastCol={index == currentConsultant.bookings.length - 2}
+            numWorkHours={numWorkHours}
+          />
+        ))}
+      </tr>
+      {isListElementVisible &&
+        currentConsultant.detailedBooking &&
+        currentConsultant.detailedBooking.map((db, index) => (
+          <DetailedBookingRows
+            key={index}
+            consultant={currentConsultant}
+            detailedBooking={db}
+            openEngagementAndSetID={openEngagementAndSetID}
+            numWorkHours={numWorkHours}
+          />
+        ))}
+      {isListElementVisible && addNewRow && (
+        <tr>
+          <td
+            className={`border-l-2 ${
+              isListElementVisible
+                ? "border-l-secondary"
+                : isRowHovered
+                ? "border-l-primary"
+                : "border-l-primary/5"
+            } `}
+          ></td>
+        </tr>
+      )}
+
+      {isListElementVisible && (
+        <tr>
+          <td
+            className={`border-l-2 ${
+              isListElementVisible
+                ? "border-l-secondary"
+                : isRowHovered
+                ? "border-l-primary"
+                : "border-l-primary/5"
+            } `}
+          ></td>
+          <td>
+            {!addNewRow && (
+              <button
+                onClick={() => {
+                  setAddNewRow(true);
+                  setIsDisabledHotkeys(true);
+                }}
+                className="flex flex-row items-center min-w-max gap-2 h-[52px]"
+                onMouseEnter={() => setIsAddStaffingHovered(true)}
+                onMouseLeave={() => setIsAddStaffingHovered(false)}
+              >
+                <span
+                  className={`w-8 h-8 flex justify-center items-center rounded bg-primary/0 ${
+                    isAddStaffingHovered && "bg-primary/10"
+                  }`}
+                >
+                  <Plus size={16} className="text-primary" />
+                </span>
+
+                <p className="small text-primary">Legg til bemanning</p>
+              </button>
+            )}
+          </td>
+        </tr>
+      )}
+    </>
+  );
+}
diff --git a/frontend/src/components/Forecast/ForecastTable.tsx b/frontend/src/components/Forecast/ForecastTable.tsx
new file mode 100644
index 00000000..3ecc15f3
--- /dev/null
+++ b/frontend/src/components/Forecast/ForecastTable.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import { isCurrentWeek } from "@/hooks/staffing/dateTools";
+import { useConsultantsFilter } from "@/hooks/staffing/useConsultantsFilter";
+import InfoPill from "../Staffing/InfoPill";
+import { Calendar } from "react-feather";
+import React, { useContext } from "react";
+import { FilteredContext } from "@/hooks/ConsultantFilterProvider";
+import ForecastRows from "./ForecastRows";
+import { MockConsultants } from "../../../mockdata/mockData";
+
+const months = [
+  "Januar",
+  "Februar",
+  "Mars",
+  "April",
+  "Mai",
+  "Juni",
+  "Juli",
+  "August",
+  "September",
+  "Oktober",
+  "November",
+  "Desember",
+];
+const monthsShort = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "Mai",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Okt",
+  "Nov",
+  "Des",
+];
+function mapMonthToNumber(month: string) {
+  return monthsShort.indexOf(month);
+}
+function isCurrentMonth(month: number) {
+  return month === 0;
+}
+export default function ForecastTable() {
+  const {
+    numWorkHours,
+    filteredConsultants,
+    weeklyTotalBillable,
+    weeklyTotalBillableAndOffered,
+    weeklyInvoiceRates,
+  } = useConsultantsFilter();
+
+  const { weekSpan } = useContext(FilteredContext).activeFilters;
+
+  return (
+    <table className={`w-full table-fixed`}>
+      <colgroup>
+        <col span={1} className="w-14" />
+        <col span={1} className="w-[190px]" />
+        {filteredConsultants
+          .at(0)
+          ?.bookings.map((_, index) => <col key={index} span={1} />)}
+      </colgroup>
+      <thead>
+        <tr className="sticky -top-6 bg-white z-10">
+          <th colSpan={2} className="pt-3 pl-2 -left-2 relative bg-white">
+            <div className="flex flex-row gap-3 pb-4 items-center">
+              <p className="normal-medium ">Konsulenter</p>
+              <p className="text-primary small-medium rounded-full bg-secondary/30 px-2 py-1">
+                {filteredConsultants?.length}
+              </p>
+            </div>
+          </th>
+          {monthsShort.map((month) => (
+            <th key={month} className=" px-2 py-1 pt-3 ">
+              <div className="flex flex-col gap-1">
+                {isCurrentMonth(mapMonthToNumber(month)) ? (
+                  <div className="flex flex-row gap-2 items-center justify-end">
+                    {/* {booking.bookingModel.totalHolidayHours > 0 && (
+                      <InfoPill
+                        text={booking.bookingModel.totalHolidayHours.toLocaleString(
+                          "nb-No",
+                          {
+                            maximumFractionDigits: 1,
+                            minimumFractionDigits: 0,
+                          },
+                        )}
+                        icon={<Calendar size="12" />}
+                        colors={"bg-holiday text-holiday_darker w-fit"}
+                        variant={weekSpan < 24 ? "wide" : "medium"}
+                      />
+                    )} */}
+                    <div className="h-2 w-2 rounded-full bg-primary" />
+
+                    <p className="normal-medium text-right">{month}</p>
+                  </div>
+                ) : (
+                  <div
+                    className={`flex justify-end ${
+                      weekSpan >= 26
+                        ? "min-h-[30px] flex-col mb-2 gap-[1px] items-end"
+                        : "flex-row gap-2"
+                    }`}
+                  >
+                    {/*  {booking.bookingModel.totalHolidayHours > 0 && (
+                      <InfoPill
+                        text={booking.bookingModel.totalHolidayHours.toLocaleString(
+                          "nb-No",
+                          {
+                            maximumFractionDigits: 1,
+                            minimumFractionDigits: 0,
+                          },
+                        )}
+                        icon={<Calendar size="12" />}
+                        colors={"bg-holiday text-holiday_darker w-fit"}
+                        variant={weekSpan < 24 ? "wide" : "medium"}
+                      />
+                    )} */}
+                    <p className="normal text-right">{month}</p>
+                  </div>
+                )}
+              </div>
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {MockConsultants.map((consultant) => (
+          <ForecastRows
+            key={consultant.id}
+            consultant={consultant}
+            numWorkHours={numWorkHours}
+          />
+        ))}
+      </tbody>
+    </table>
+  );
+}
diff --git a/frontend/src/components/Forecast/MonthCell.tsx b/frontend/src/components/Forecast/MonthCell.tsx
new file mode 100644
index 00000000..4b87de03
--- /dev/null
+++ b/frontend/src/components/Forecast/MonthCell.tsx
@@ -0,0 +1,195 @@
+import { BookedHoursPerWeek, ConsultantReadModel } from "@/api-types";
+import { HoveredWeek } from "@/components/Staffing/HoveredWeek";
+import InfoPill from "@/components/Staffing/InfoPill";
+import {
+  AlertTriangle,
+  Calendar,
+  Coffee,
+  FileText,
+  Moon,
+  Sun,
+} from "react-feather";
+import { getInfopillVariantByColumnCount } from "@/components/Staffing/helpers/utils";
+import React from "react";
+import { has } from "lodash";
+
+export function MonthCell(props: {
+  forecastValue: number;
+  hasBeenEdited: boolean;
+  consultant: ConsultantReadModel;
+  setHoveredRowWeek: (number: number) => void;
+  hoveredRowWeek: number;
+  month: number;
+  columnCount: number;
+  isLastCol: boolean;
+  isSecondLastCol: boolean;
+  numWorkHours: number;
+}) {
+  const {
+    forecastValue,
+    consultant,
+    hasBeenEdited,
+    setHoveredRowWeek,
+    hoveredRowWeek,
+    month,
+    columnCount,
+    isLastCol,
+    isSecondLastCol,
+    numWorkHours,
+  } = props;
+
+  /* let pillNumber = 0;
+
+  if (bookedHoursPerWeek.bookingModel.totalOffered > 0) {
+    pillNumber++;
+  }
+  if (bookedHoursPerWeek.bookingModel.totalOverbooking > 0) {
+    pillNumber++;
+  }
+  if (bookedHoursPerWeek.bookingModel.totalPlannedAbsences > 0) {
+    pillNumber++;
+  }
+  if (bookedHoursPerWeek.bookingModel.totalVacationHours > 0) {
+    pillNumber++;
+  }
+  if (bookedHoursPerWeek.bookingModel.totalSellableTime > 0) {
+    pillNumber++;
+  } */
+  const uneditable = forecastValue === 100;
+  return (
+    <td
+      key={month}
+      className={`h-[52px] ${isLastCol ? "py-0.5 pl-0.5" : "p-0.5"}`}
+    >
+      <div
+        className={`flex bg-primary/[3%] flex-col gap-1 p-2 justify-end rounded w-full h-full relative border border-transparent hover:border-primary/30 hover:cursor-pointer `}
+        onMouseEnter={() => setHoveredRowWeek(month)}
+        onMouseLeave={() => setHoveredRowWeek(-1)}
+      >
+        {hoveredRowWeek != -1 && hoveredRowWeek == month && (
+          <HoveredWeek
+            hoveredRowWeek={hoveredRowWeek}
+            consultant={consultant}
+            isLastCol={isLastCol}
+            isSecondLastCol={isSecondLastCol}
+            columnCount={columnCount}
+          />
+        )}
+        <div className="flex flex-row justify-end gap-1">
+          {/* {bookedHoursPerWeek.bookingModel.totalOffered > 0 && (
+            <InfoPill
+              text={bookedHoursPerWeek.bookingModel.totalOffered.toLocaleString(
+                "nb-No",
+                {
+                  maximumFractionDigits: 1,
+                  minimumFractionDigits: 0,
+                },
+              )}
+              colors="bg-offer text-primary_darker border-primary_darker"
+              icon={<FileText size="12" />}
+              variant={getInfopillVariantByColumnCount(columnCount)}
+            />
+          )}
+          {bookedHoursPerWeek.bookingModel.totalSellableTime > 0 &&
+            getInfopillVariantByColumnCount(columnCount) !== "narrow" && (
+              <InfoPill
+                text={bookedHoursPerWeek.bookingModel.totalSellableTime.toLocaleString(
+                  "nb-No",
+                  {
+                    maximumFractionDigits: 1,
+                    minimumFractionDigits: 0,
+                  },
+                )}
+                colors="bg-available text-available_darker border-available_darker"
+                icon={<Coffee size="12" />}
+                variant={getInfopillVariantByColumnCount(columnCount)}
+              />
+            )}
+          {bookedHoursPerWeek.bookingModel.totalVacationHours > 0 && (
+            <InfoPill
+              text={bookedHoursPerWeek.bookingModel.totalVacationHours.toLocaleString(
+                "nb-No",
+                {
+                  maximumFractionDigits: 1,
+                  minimumFractionDigits: 0,
+                },
+              )}
+              colors="bg-vacation text-vacation_darker border-vacation_darker"
+              icon={<Sun size="12" />}
+              variant={getInfopillVariantByColumnCount(columnCount)}
+            />
+          )}
+          {bookedHoursPerWeek.bookingModel.totalPlannedAbsences > 0 &&
+            getInfopillVariantByColumnCount(columnCount) !== "narrow" && (
+              <InfoPill
+                text={bookedHoursPerWeek.bookingModel.totalPlannedAbsences.toLocaleString(
+                  "nb-No",
+                  {
+                    maximumFractionDigits: 1,
+                    minimumFractionDigits: 0,
+                  },
+                )}
+                colors="bg-absence text-absence_darker border-absence_darker"
+                icon={<Moon size="12" />}
+                variant={getInfopillVariantByColumnCount(columnCount)}
+              />
+            )}
+          {bookedHoursPerWeek.bookingModel.totalOverbooking > 0 && (
+            <InfoPill
+              text={bookedHoursPerWeek.bookingModel.totalOverbooking.toLocaleString(
+                "nb-No",
+                {
+                  maximumFractionDigits: 1,
+                  minimumFractionDigits: 0,
+                },
+              )}
+              colors="bg-overbooked_darker text-white border-white"
+              icon={<AlertTriangle size="12" />}
+              variant={getInfopillVariantByColumnCount(columnCount)}
+            />
+          )}
+          {bookedHoursPerWeek.bookingModel.totalNotStartedOrQuit > 0 && (
+            <InfoPill
+              text={bookedHoursPerWeek.bookingModel.totalNotStartedOrQuit.toLocaleString(
+                "nb-No",
+                {
+                  maximumFractionDigits: 1,
+                  minimumFractionDigits: 0,
+                },
+              )}
+              colors="bg-absence/60 text-absence_darker border-absence_darker"
+              icon={<Calendar size="12" />}
+              variant={getInfopillVariantByColumnCount(columnCount)}
+            />
+          )} */}
+        </div>
+        <p
+          className={`text-right ${
+            hasBeenEdited ? "normal-medium" : "normal"
+          } ${uneditable ? "text-primary/60" : "text-primary"}`}
+        >
+          {/*  {checkIfNotStartedOrQuit(consultant, bookedHoursPerWeek, numWorkHours)
+            ? "-"
+            : bookedHoursPerWeek.bookingModel.totalBillable.toLocaleString(
+                "nb-No",
+              )} */}
+          {`${forecastValue}%`}
+        </p>
+      </div>
+    </td>
+  );
+}
+
+function checkIfNotStartedOrQuit(
+  consultant: ConsultantReadModel,
+  bookedHoursPerWeek: BookedHoursPerWeek,
+  numWorkHours: number,
+) {
+  const notStartedOrQuitHours =
+    bookedHoursPerWeek.bookingModel.totalNotStartedOrQuit;
+
+  return (
+    notStartedOrQuitHours ==
+    numWorkHours - bookedHoursPerWeek.bookingModel.totalHolidayHours
+  );
+}
diff --git a/frontend/src/pagecontent/ForecastContent.tsx b/frontend/src/pagecontent/ForecastContent.tsx
index 3859a601..65365864 100644
--- a/frontend/src/pagecontent/ForecastContent.tsx
+++ b/frontend/src/pagecontent/ForecastContent.tsx
@@ -8,6 +8,7 @@ import IconActionButton from "@/components/Buttons/IconActionButton";
 import { Filter } from "react-feather";
 import ActiveFilters from "@/components/ActiveFilters";
 import WeekSelection from "@/components/WeekSelection";
+import ForecastTable from "@/components/Forecast/ForecastTable";
 
 export function ForecastContent() {
   const [isSideBarOpen, setIsSidebarOpen] = useState<boolean>(false);
@@ -34,6 +35,7 @@ export function ForecastContent() {
 
           <WeekSelection />
         </div>
+        <ForecastTable />
         <InfoPillDescriptions />
       </div>
     </>