diff --git a/src/_temp_types/projects.ts b/src/_temp_types/projects.ts
index e5619bd..a10dfb3 100644
--- a/src/_temp_types/projects.ts
+++ b/src/_temp_types/projects.ts
@@ -5,7 +5,7 @@ export type ProjectRequirement = {
   attribute: number;
   operator: RequirementOperator;
   // The number of students with this attribute required as described by the RequirementOperator
-  value: number;
+  subject: number;
 };
 
 export enum RequirementOperator {
@@ -25,8 +25,7 @@ export enum RequirementOperator {
 export type Project = {
   id: number;
   name: string;
-  // Specifies the number of teams that can work on this project
-  numberOfTeams: number;
+  number_of_teams: number; // Specifies the number of teams that can work on this project
   requirements?: ProjectRequirement[];
 };
 
diff --git a/src/app/(app)/course/[courseId]/project-sets/[projectSetId]/(components)/ProjectRequirementsTable.tsx b/src/app/(app)/course/[courseId]/project-sets/[projectSetId]/(components)/ProjectRequirementsTable.tsx
new file mode 100644
index 0000000..cca0bb7
--- /dev/null
+++ b/src/app/(app)/course/[courseId]/project-sets/[projectSetId]/(components)/ProjectRequirementsTable.tsx
@@ -0,0 +1,106 @@
+'use client'
+
+import {DataTable} from "@/components/ui/data-table"
+import {Text} from "@/components/ui/text"
+import {ProjectRequirement, RequirementOperator} from "@/_temp_types/projects"
+import {ColumnDef} from "@tanstack/react-table"
+import {DataTableColumnHeader} from "@/components/ui/data-table-column-header"
+import {
+  useProjectsContext,
+} from "@/app/(app)/course/[courseId]/project-sets/[projectSetId]/(hooks)"
+import {toast} from "@/hooks/use-toast"
+import {Button} from "@/components/ui/button"
+import {useState} from "react"
+import {Pencil1Icon, ExitIcon} from "@radix-ui/react-icons"
+
+const persistedColumnDefs: ColumnDef<ProjectRequirement>[] = [
+  {
+    accessorKey: "attribute",
+    header: ({column}) => (
+      <DataTableColumnHeader column={column} title={"Attribute"}/>
+    ),
+  },
+  {
+    accessorKey: "operator",
+    header: "Operator",
+    cell: ({row}) => {
+      const operator = row.original.operator
+      // Check if operator is a valid RequirementOperator
+      if (!Object.keys(RequirementOperator).includes(operator as RequirementOperator)) {
+        toast({
+          title: `Invalid operator "${operator}" in Project Requirement.`,
+          variant: "destructive",
+        })
+        return null
+      }
+      return RequirementOperator[operator as string as keyof typeof RequirementOperator]
+    },
+  },
+  {
+    accessorKey: "subject",
+    header: "Value",
+  },
+]
+
+export const ProjectRequirementsTable = () => {
+  const columns = persistedColumnDefs
+
+  const {currentProject} = useProjectsContext()
+  // TODO: Implement edit mode
+  const [isEditing, setIsEditing] = useState(false)
+
+
+  // TODO: Implement conversion of Attribute and Attribute Value.
+  return (
+    <div className="w-full">
+      {currentProject ? <>
+        <div className="flex flex-col w-full">
+          <div className="flex justify-between items-center">
+            <Text as="h3" element="h3">
+              {currentProject.name}
+            </Text>
+            <div className="flex items-center gap-2">
+              {/* TODO: Implement edit mode */}
+              <Button variant="outline" size="sm" onClick={() => setIsEditing(!isEditing)}>
+                {isEditing ? (
+                  <>
+                    <ExitIcon className="mr-2"/> Exit Edit Mode
+                  </>
+                ) : (
+                  <>
+                    <Pencil1Icon className="mr-2"/> Enter Edit Mode
+                  </>
+                )}
+
+              </Button>
+            </div>
+          </div>
+          <div className="flex items-center mt-2">
+            {/* TODO: Implement edit mode */}
+            <Text element="p" as="smallText">
+              This project can be completed
+              by {currentProject.number_of_teams} team{currentProject.number_of_teams > 1 && 's'}.
+            </Text>
+          </div>
+        </div>
+        <div className="flex flex-col mt-5">
+          <div className="flex justify-between items-end">
+            <Text as="p" element="p" className="font-bold">
+              Requirements
+            </Text>
+            {isEditing && <Button size="sm">Add requirements</Button>}
+          </div>
+          <div>
+            <DataTable<ProjectRequirement>
+              columns={columns}
+              data={currentProject?.requirements ?? []}
+            />
+          </div>
+        </div>
+      </> : (
+        <div>
+          No project found.
+        </div>
+      )}
+    </div>)
+}
diff --git a/src/app/(app)/course/[courseId]/project-sets/[projectSetId]/(components)/index.tsx b/src/app/(app)/course/[courseId]/project-sets/[projectSetId]/(components)/index.tsx
index 876473e..2c687cd 100644
--- a/src/app/(app)/course/[courseId]/project-sets/[projectSetId]/(components)/index.tsx
+++ b/src/app/(app)/course/[courseId]/project-sets/[projectSetId]/(components)/index.tsx
@@ -1,3 +1,4 @@
 export {ProjectSetSelect, type ProjectSetSelectProps} from './ProjectSetSelect'
 export {SidebarProjectList} from './SidebarProjectList'
+export {ProjectRequirementsTable} from './ProjectRequirementsTable'
 export {ProjectSetSidebar} from './ProjectSetSidebar'
diff --git a/src/app/(app)/course/[courseId]/project-sets/[projectSetId]/page.tsx b/src/app/(app)/course/[courseId]/project-sets/[projectSetId]/page.tsx
index c6e177d..9fc6cd8 100644
--- a/src/app/(app)/course/[courseId]/project-sets/[projectSetId]/page.tsx
+++ b/src/app/(app)/course/[courseId]/project-sets/[projectSetId]/page.tsx
@@ -2,6 +2,7 @@ import {toast} from "@/hooks/use-toast"
 import {type ApiTeamSetTemplate} from "@/_temp_types/api/teams"
 import PageView from "@/components/views/Page"
 import {
+  ProjectRequirementsTable,
   ProjectSetSidebar,
 } from "./(components)"
 import {ProjectsProvider, ProjectSearchProvider} from "./(hooks)"
@@ -38,7 +39,13 @@ const ProjectSetPage = async ({params: {courseId, projectSetId}}: ProjectPageTyp
   >
     <ProjectsProvider>
       <ProjectSearchProvider>
-        <ProjectSetSidebar allProjectSets={await getOutlinedProjectSetsData()}/>
+        <div className="container mx-auto p-0">
+          <div className="flex w-full gap-10">
+            <ProjectSetSidebar allProjectSets={await getOutlinedProjectSetsData()}/>
+            <div className="border-r border-gray-300 h-[55vh]"/>
+            <ProjectRequirementsTable />
+          </div>
+        </div>
       </ProjectSearchProvider>
     </ProjectsProvider>
   </PageView>
diff --git a/src/app/(app)/course/[courseId]/students/(table)/columns.tsx b/src/app/(app)/course/[courseId]/students/(table)/columns.tsx
index 7f12853..c2bc01d 100644
--- a/src/app/(app)/course/[courseId]/students/(table)/columns.tsx
+++ b/src/app/(app)/course/[courseId]/students/(table)/columns.tsx
@@ -4,7 +4,7 @@ import { Student } from "@/_temp_types/student"
 import { ColumnDef } from "@tanstack/react-table"
 import { Text } from "@/components/ui/text"
 import { Badge } from "@/components/ui/badge"
-import { DataTableColumnHeader } from "@/components/ui/table-column-header"
+import { DataTableColumnHeader } from "@/components/ui/data-table-column-header"
 
 type SectionFilterValue = string[];
 
diff --git a/src/components/ui/table-column-header.tsx b/src/components/ui/table-column-header.tsx
deleted file mode 100644
index 364a55a..0000000
--- a/src/components/ui/table-column-header.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-"use client"
-
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  CaretSortIcon,
-  ResetIcon,
-} from "@radix-ui/react-icons"
-import { Column } from "@tanstack/react-table"
-
-import { Button } from "@/components/ui/button"
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-
-import { cn } from "@/lib/utils"
-import React from "react"
-
-interface DataTableColumnHeaderProps<TData, TValue>
-  extends React.HTMLAttributes<HTMLDivElement> {
-  column: Column<TData, TValue>;
-  title: string;
-  hasDropDownMenu?: boolean;
-}
-
-export function DataTableColumnHeader<TData, TValue>({
-  column,
-  title,
-  className,
-  hasDropDownMenu = true,
-}: DataTableColumnHeaderProps<TData, TValue>) {
-  if (!column.getCanSort()) {
-    return <div className={cn(className)}>{title}</div>
-  }
-
-  return (
-    <div>
-      {hasDropDownMenu ? (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="-ml-3 h-8 data-[state=open]:bg-accent"
-            >
-              <span>{title}</span>
-              {column.getIsSorted() === "desc" ? (
-                <ArrowDownIcon className="ml-2 h-4 w-4" />
-              ) : column.getIsSorted() === "asc" ? (
-                <ArrowUpIcon className="ml-2 h-4 w-4" />
-              ) : (
-                <CaretSortIcon className="ml-2 h-4 w-4" />
-              )}
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="start">
-            <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-              <ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-              Asc
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-              <ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-              Desc
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem onClick={() => column.clearSorting()}>
-              <ResetIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
-              Reset
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      ) : (
-        <Button
-          variant="ghost"
-          size="sm"
-          className="-ml-3 h-8 data-[state=open]:bg-accent"
-          onClick={() => column.toggleSorting()}
-        >
-          <span>{title}</span>
-          {column.getIsSorted() === "desc" ? (
-            <ArrowDownIcon className="ml-2 h-4 w-4" />
-          ) : column.getIsSorted() === "asc" ? (
-            <ArrowUpIcon className="ml-2 h-4 w-4" />
-          ) : (
-            <CaretSortIcon className="ml-2 h-4 w-4" />
-          )}
-        </Button>
-      )}
-    </div>
-  )
-}
diff --git a/src/components/ui/table-pagination.tsx b/src/components/ui/table-pagination.tsx
deleted file mode 100644
index 006787b..0000000
--- a/src/components/ui/table-pagination.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-"use client"
-
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  DoubleArrowLeftIcon,
-  DoubleArrowRightIcon,
-} from "@radix-ui/react-icons"
-import { Table } from "@tanstack/react-table"
-
-import { Button } from "@/components/ui/button"
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import { Text } from "./text"
-
-interface DataTablePaginationProps<TData> {
-  table: Table<TData>;
-}
-
-export function DataTablePagination<TData>({
-  table,
-}: DataTablePaginationProps<TData>) {
-  return (
-    <div className="flex items-center justify-between px-2">
-      <div className="flex-1 text-sm text-muted-foreground">
-        {table.getFilteredSelectedRowModel().rows.length} of{" "}
-        {table.getFilteredRowModel().rows.length} row(s) selected.
-      </div>
-      <div className="flex items-center space-x-6 lg:space-x-8">
-        <div className="flex items-center space-x-2">
-          <Text element="p" as="mutedText">
-            Row per page
-          </Text>
-          <Select
-            value={`${table.getState().pagination.pageSize}`}
-            onValueChange={(value) => {
-              table.setPageSize(Number(value))
-            }}
-          >
-            <SelectTrigger className="h-8 w-[70px]">
-              <SelectValue placeholder={table.getState().pagination.pageSize} />
-            </SelectTrigger>
-            <SelectContent side="top">
-              {[10, 20, 30, 40, 50].map((pageSize) => (
-                <SelectItem key={pageSize} value={`${pageSize}`}>
-                  {pageSize}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <Text element="p" as="mutedText">
-          Page {table.getState().pagination.pageIndex + 1} of{" "}
-          {table.getPageCount()}
-        </Text>
-        <div className="flex items-center space-x-2">
-          <Button
-            variant="outline"
-            className="hidden h-8 w-8 p-0 lg:flex"
-            onClick={() => table.setPageIndex(0)}
-            disabled={!table.getCanPreviousPage()}
-          >
-            <span className="sr-only">Go to first page</span>
-            <DoubleArrowLeftIcon className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="outline"
-            className="h-8 w-8 p-0"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            <span className="sr-only">Go to previous page</span>
-            <ChevronLeftIcon className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="outline"
-            className="h-8 w-8 p-0"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            <span className="sr-only">Go to next page</span>
-            <ChevronRightIcon className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="outline"
-            className="hidden h-8 w-8 p-0 lg:flex"
-            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-            disabled={!table.getCanNextPage()}
-          >
-            <span className="sr-only">Go to last page</span>
-            <DoubleArrowRightIcon className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-    </div>
-  )
-}