diff --git a/components/admin/DashboardTableTitle.tsx b/components/admin/DashboardTableTitle.tsx
index c5d2ae8..d7d341a 100644
--- a/components/admin/DashboardTableTitle.tsx
+++ b/components/admin/DashboardTableTitle.tsx
@@ -1,12 +1,18 @@
-import React, { FC } from "react";
+import React, { FC, useState, createContext, useContext } from "react";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
+import ExpandableRowTable from "./ExpandableRowTable";
+import { set } from "firebase/database";
 
 interface TitleProps {
   numFirstChoiceEntries?: number;
   numSecondChoiceEntries?: number;
   setWhichChoiceTab: (tab: number) => void;
   whichChoiceTab?: number;
+  edit: boolean;
+  toggleEdit: () => void;
+  saved?: boolean;
+  toggleSaved: () => void;
 }
 interface TabDescriptionProps {
   title: string;
@@ -26,18 +32,65 @@ const TabDescription: FC<TabDescriptionProps> = ({
   </div>
 );
 
+
+
+export const EditButton = ({ edit, toggleEdit, saved, toggleSaved}: { edit: boolean, toggleEdit: () => void, saved: any, toggleSaved: () => void}) => {
+  const editButton =
+  "border-2 border-blue rounded-full text-blue text-center px-8 py-1 m-2 inline-block capitalize bg-white";
+
+
+  // set saveFn to randomFn
+  // saveFn = randomFn;
+
+  const onSave = () => {
+    toggleSaved();
+    toggleEdit();
+  }
+
+  return (
+    ( edit ? (
+      <div className="flex">
+        <button className={`${editButton} flex items-center mr-2`} onClick={toggleEdit}>
+          Cancel
+        </button>
+        <button className={`${editButton} flex items-center`} onClick={onSave}>
+          Save
+        </button>
+      </div>
+    ): (
+      <button className={`${editButton} flex items-center`} onClick={toggleEdit}>
+        <svg
+          width="13"
+          height="12"
+          viewBox="0 0 13 12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1.67073 12C1.34878 12 1.07307 11.8856 0.843611 11.6568C0.614147 11.428 0.499611 11.1526 0.500001 10.8307V2.64555C0.500001 2.32399 0.614733 2.04862 0.844196 1.81944C1.07366 1.59026 1.34917 1.47586 1.67073 1.47625H6.89512L5.72439 2.64555H1.67073V10.8307H9.86585V6.76736L11.0366 5.59805V10.8307C11.0366 11.1523 10.9219 11.4276 10.6924 11.6568C10.4629 11.886 10.1874 12.0004 9.86585 12H1.67073ZM8.2122 1.81242L9.04634 2.63094L5.18293 6.48965V7.32278H6.00244L9.88049 3.44945L10.7146 4.26797L6.83659 8.14129C6.72927 8.24848 6.60478 8.33384 6.46312 8.39737C6.32146 8.4609 6.17278 8.49247 6.01707 8.49208H4.59756C4.43171 8.49208 4.29259 8.43596 4.1802 8.3237C4.06781 8.21145 4.01181 8.07269 4.0122 7.90743V6.48965C4.0122 6.33374 4.04146 6.18504 4.1 6.04356C4.15854 5.90207 4.24146 5.77793 4.34878 5.67113L8.2122 1.81242ZM10.7146 4.26797L8.2122 1.81242L9.67561 0.350792C9.90976 0.116931 10.1903 0 10.5174 0C10.8444 0 11.1199 0.116931 11.3439 0.350792L12.1634 1.18392C12.3878 1.40804 12.5 1.68088 12.5 2.00244C12.5 2.32399 12.3878 2.59683 12.1634 2.82095L10.7146 4.26797Z"
+            fill="#0073E5"
+          />
+        </svg>
+        Edit
+      </button>
+      )
+    )
+  )
+}
+
 const TableTitle: FC<TitleProps> = ({
   numFirstChoiceEntries,
   numSecondChoiceEntries,
   setWhichChoiceTab,
   whichChoiceTab,
+  edit,
+  toggleEdit,
+  saved,
+  toggleSaved
 }) => {
   const pillStyle =
     "border-2 border-blue-100 text-blue rounded-full px-4 py-2 m-2 font-large inline-block";
 
-  // const editButton =
-  //   "border-2 border-blue rounded-full text-blue text-center px-8 py-1 m-2 inline-block capitalize bg-white";
-
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setWhichChoiceTab(newValue);
   };
@@ -71,21 +124,8 @@ const TableTitle: FC<TitleProps> = ({
           />
         </Tabs>
       </div>
-      {/* <button className={`${editButton} flex items-center`}>
-        <svg
-          width="13"
-          height="12"
-          viewBox="0 0 13 12"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M1.67073 12C1.34878 12 1.07307 11.8856 0.843611 11.6568C0.614147 11.428 0.499611 11.1526 0.500001 10.8307V2.64555C0.500001 2.32399 0.614733 2.04862 0.844196 1.81944C1.07366 1.59026 1.34917 1.47586 1.67073 1.47625H6.89512L5.72439 2.64555H1.67073V10.8307H9.86585V6.76736L11.0366 5.59805V10.8307C11.0366 11.1523 10.9219 11.4276 10.6924 11.6568C10.4629 11.886 10.1874 12.0004 9.86585 12H1.67073ZM8.2122 1.81242L9.04634 2.63094L5.18293 6.48965V7.32278H6.00244L9.88049 3.44945L10.7146 4.26797L6.83659 8.14129C6.72927 8.24848 6.60478 8.33384 6.46312 8.39737C6.32146 8.4609 6.17278 8.49247 6.01707 8.49208H4.59756C4.43171 8.49208 4.29259 8.43596 4.1802 8.3237C4.06781 8.21145 4.01181 8.07269 4.0122 7.90743V6.48965C4.0122 6.33374 4.04146 6.18504 4.1 6.04356C4.15854 5.90207 4.24146 5.77793 4.34878 5.67113L8.2122 1.81242ZM10.7146 4.26797L8.2122 1.81242L9.67561 0.350792C9.90976 0.116931 10.1903 0 10.5174 0C10.8444 0 11.1199 0.116931 11.3439 0.350792L12.1634 1.18392C12.3878 1.40804 12.5 1.68088 12.5 2.00244C12.5 2.32399 12.3878 2.59683 12.1634 2.82095L10.7146 4.26797Z"
-            fill="#0073E5"
-          />
-        </svg>
-        Edit
-      </button> */}
+        <EditButton edit={edit} toggleEdit={toggleEdit} saved={saved} toggleSaved={toggleSaved}/>
+        {/* <ExpandableRowTable edit={edit} /> */}
     </div>
   );
 };
diff --git a/components/admin/ExpandableRowTable.tsx b/components/admin/ExpandableRowTable.tsx
index 6d09257..54731f2 100644
--- a/components/admin/ExpandableRowTable.tsx
+++ b/components/admin/ExpandableRowTable.tsx
@@ -1,5 +1,5 @@
 // InnerTableComponent.tsx
-import React from "react";
+import React, {useState, useEffect} from "react";
 import MUIDataTable, {
   MUIDataTableColumn,
   MUIDataTableOptions,
@@ -7,6 +7,9 @@ import MUIDataTable, {
 import { getExpandableRowMuiTheme } from "utils/muidatatable";
 import { MuiThemeProvider } from "@material-ui/core";
 import { SkillCategory } from "@utils/muidatatable";
+import { set } from "firebase/database";
+import { fetchGraphql } from "@utils/makegqlrequest";
+import { mutations } from "graphql/queries";
 
 type ReviewerData = {
   reviewerName: string;
@@ -21,9 +24,112 @@ type ReviewerData = {
 interface InnerTableProps {
   data: ReviewerData[];
   columns: MUIDataTableColumn[];
+  edit?: boolean;
+  toggleEdit?: () => void;
+  saved?: boolean;
+  toggleSaved: any;
 }
 
-const ExpandableRowTable: React.FC<InnerTableProps> = ({ data, columns }) => {
+const ExpandableRowTable: React.FC<InnerTableProps> = ({ data, columns, edit, saved, toggleSaved}) => {
+
+  const initData1 = {"PFSG": data[0]["PFSG"], "team": data[0]["Team Player"], "D2L": data[0]["D2L"], "skill": data[0]["Skill"]}
+  const initData2 = {"PFSG": data[1]["PFSG"], "team": data[1]["Team Player"], "D2L": data[1]["D2L"], "skill": data[1]["Skill"]}
+
+  const reviewerId1 = data[0]["ReviewerId"];
+  const reviewerId2 = data[1]["ReviewerId"];
+
+  const [PFSG1, setPFSG1] = useState(initData1["PFSG"])
+  const [team1, setTeam1] = useState(initData1["team"])
+  const [D2L1, setD2L1] = useState(initData1["D2L"])
+  const [skill1, setSkill1] = useState(initData1["skill"])
+
+  const [PFSG2, setPFSG2] = useState(initData2["PFSG"])
+  const [team2, setTeam2] = useState(initData2["team"])
+  const [D2L2, setD2L2] = useState(initData2["D2L"])
+  const [skill2, setSkill2] = useState(initData2["skill"])
+
+  // Logic: When the state of saved is changed, the useEffect will run only if saved is true
+  useEffect(() => { 
+      if (saved){
+        fetchGraphql(mutations.changeRating, {id: reviewerId1, ratingToBeChanged: "passionFSG", newValue: PFSG1}).then(
+          (result) => {
+            if (result) {
+              console.log(result)
+          }},
+        )
+        fetchGraphql(mutations.changeRating, {id: reviewerId1, ratingToBeChanged: "teamPlayer", newValue: team1}).then(
+          (result) => {
+            if (result) {
+              console.log(result)
+          }},
+        )
+        fetchGraphql(mutations.changeRating, {id: reviewerId1, ratingToBeChanged: "desireToLearn", newValue: D2L1}).then(
+          (result) => {
+            if (result) {
+              console.log(result)
+          }},
+        )
+        fetchGraphql(mutations.changeRating, {id: reviewerId1, ratingToBeChanged: "skill", newValue: skill1}).then(
+          (result) => {
+            if (result) {
+              console.log(result)
+          }},
+        )
+        fetchGraphql(mutations.changeRating, {id: reviewerId2, ratingToBeChanged: "passionFSG", newValue: PFSG2}).then(
+          (result) => {
+            if (result) {
+              console.log(result)
+          }},
+        )
+        fetchGraphql(mutations.changeRating, {id: reviewerId2, ratingToBeChanged: "teamPlayer", newValue: team2}).then(
+          (result) => {
+            if (result) {
+              console.log(result)
+          }},
+        )
+        fetchGraphql(mutations.changeRating, {id: reviewerId2, ratingToBeChanged: "desireToLearn", newValue: D2L2}).then(
+          (result) => {
+            if (result) {
+              console.log(result)
+          }},
+        )
+        fetchGraphql(mutations.changeRating, {id: reviewerId2, ratingToBeChanged: "skill", newValue: skill2}).then(
+          (result) => {
+            if (result) {
+              console.log(result)
+          }},
+        )
+        toggleSaved();
+      }
+  }, [saved]);
+
+  const handleChange = (event: any, row: number) => {
+    const { id, value } = event.target;
+
+    if(edit && row == 0) {
+      if (id == "PFSG"){
+        setPFSG1(parseInt(value))
+      } else if (id == "Team Player") {
+        setTeam1(parseInt(value))
+      } else if (id == "D2L") {
+        setD2L1(parseInt(value))
+      } else if (id == "Skill"){
+        setSkill1(parseInt(value))
+      }
+    }
+    if (edit && row == 1) {
+      if (id == "PFSG"){
+        setPFSG2(parseInt(value))
+      } else if (id == "Team Player") {
+        setTeam2(parseInt(value))
+      } else if (id == "D2L") {
+        setD2L2(parseInt(value))
+      } else if (id == "Skill"){
+        setSkill2(parseInt(value))
+      }
+    }
+  };
+
   const updatedColumns = columns.map((column) => {
     if (column.name === "Skill Category") {
       return {
@@ -36,6 +142,61 @@ const ExpandableRowTable: React.FC<InnerTableProps> = ({ data, columns }) => {
         },
       };
     }
+    const getValue = (value: number, column: MUIDataTableColumn, row: number) => {
+      if (edit && row == 0) {
+        if (column.name == "PFSG"){
+          return PFSG1
+        } else if (column.name == "Team Player") {
+          return team1
+        } else if (column.name == "D2L") {
+          return D2L1
+        } else if (column.name == "Skill"){
+          return skill1
+        }
+      }
+      else if (edit && row == 1) {
+        if (column.name == "PFSG"){
+          return PFSG2
+        } else if (column.name == "Team Player") {
+          return team2
+        } else if (column.name == "D2L") {
+          return D2L2
+        } else if (column.name == "Skill"){
+          return skill2
+        }
+      }
+      else {
+        return value
+      }
+    }
+
+    // Add custom body render for the values when edit is true
+    if (edit) {
+      if (column.name === "PFSG" || column.name === "Team Player" || column.name === "D2L" || column.name === "Skill") {
+        return {
+          ...column,
+          options: {
+            ...column.options,
+            customBodyRender: (value: number, tableMeta: any) => {
+              return (
+                <input 
+                  type="number" 
+                  value={getValue(value, column, tableMeta.rowIndex)} 
+                  onChange={(e) => handleChange(e, tableMeta.rowIndex)}
+                  id={column.name}
+                  style={{ 
+                    width: '40px', 
+                    padding: '5px', 
+                    border: '1px solid #ccc', 
+                    borderRadius: '4px' 
+                  }} 
+                />
+              );
+            },
+          },
+        };
+      }
+    }
     return column;
   });
 
diff --git a/components/admin/ReviewTable.tsx b/components/admin/ReviewTable.tsx
index c186aed..aa66b61 100644
--- a/components/admin/ReviewTable.tsx
+++ b/components/admin/ReviewTable.tsx
@@ -16,6 +16,10 @@ interface TableProps {
   numFirstChoiceEntries?: number;
   setNumSecondChoiceEntries: (tab: number) => void;
   numSecondChoiceEntries?: number;
+  edit?: boolean;
+  toggleEdit?: () => void;
+  saved?: boolean;
+  toggleSaved?: () => void;
 }
 
 const ReviewTable: React.FC<TableProps> = ({
@@ -23,6 +27,10 @@ const ReviewTable: React.FC<TableProps> = ({
   whichChoiceTab,
   setNumFirstChoiceEntries,
   setNumSecondChoiceEntries,
+  edit,
+  toggleEdit,
+  saved,
+  toggleSaved,
 }) => {
   const [firstChoiceApplications, setFirstChoiceApplications] = useState<any[]>(
     [],
@@ -91,26 +99,53 @@ const ReviewTable: React.FC<TableProps> = ({
     return secondChoiceApplications.map(createStudentRow);
   };
 
-  const generateMockInnerData = () => {
-    return [
+  const generateInnerData = (dataindex: number): any => {
+    const reviewerScore = firstChoiceApplications[dataindex].reviewDashboards;
+    const reviewer = firstChoiceApplications[dataindex].reviewers;
+
+    const firstScore =  reviewerScore[0];
+    const secondScore = reviewerScore[1];
+      
+    const firstReviewer = reviewer[0];
+    const secondReviewer = reviewer[1];
+
+    if (!firstReviewer || !secondReviewer) {
+      return [{},{}];
+    }
+
+    const collectedReviewers = [
       {
-        "Reviewer Name": "John Doe",
-        PFSG: 4,
-        "Team Player": 3,
-        D2L: 6,
-        Skill: 5,
-        "Skill Category": "junior",
-        "Reviewer Comments": "Great work presenting your case study.",
+      "Reviewer Name": firstReviewer.firstName + " " + firstReviewer.lastName,
+      PFSG: firstScore.passionFSG,
+      "Team Player": firstScore.teamPlayer, 
+      D2L: firstScore.desireToLearn,
+      Skill: firstScore.skill,
+      "Total Score": firstScore.passionFSG + firstScore.teamPlayer + firstScore.desireToLearn + firstScore.skill,
+      "Skill Category": firstScore.skillCategory,
+      "Reviewer Comments": firstScore.reviewerComments,
+      "ReviewerId": firstScore.reviewerId,
       },
-      // Add as many objects as you want to simulate different rows
-    ];
+      {
+        "Reviewer Name": secondReviewer.firstName + " " + secondReviewer.lastName,
+        PFSG: secondScore.passionFSG,
+        "Team Player": secondScore.teamPlayer, 
+        D2L: secondScore.desireToLearn,
+        Skill: secondScore.skill,
+        "Total Score": secondScore.passionFSG + secondScore.teamPlayer + secondScore.desireToLearn + secondScore.skill,
+        "Skill Category": secondScore.skillCategory,
+        "Reviewer Comments": secondScore.reviewerComments,
+        "ReviewerId": secondScore.reviewerId,
+      },
+    ]
+
+    return (collectedReviewers);
   };
 
   const renderExpandableRow = (
     rowData: any,
     rowMeta: { dataIndex: number },
   ) => {
-    const innerData = generateMockInnerData(); // Use mock data for testing
+    const reviewers = generateInnerData(rowMeta.dataIndex); 
     const application = {
       secondChoiceRole: "Graphic Designer",
       recommendForSecondChoice: true,
@@ -126,6 +161,10 @@ const ReviewTable: React.FC<TableProps> = ({
       { name: "Team Player", options: { filter: false, sort: false } },
       { name: "D2L", options: { filter: false, sort: false } },
       { name: "Skill", options: { filter: false, sort: false } },
+      {
+        name: "Total Score",
+        options: { filter: false, sort: false },
+      },
       {
         name: "Skill Category",
         options: { filter: false, sort: false },
@@ -142,7 +181,7 @@ const ReviewTable: React.FC<TableProps> = ({
         <tr>
           <td colSpan={8} className="p-5 px-10">
             <div className="flex flex-col font-source text-base">
-              <ExpandableRowTable data={innerData} columns={innerColumns} />
+              <ExpandableRowTable data={reviewers} columns={innerColumns} edit={edit} toggleEdit={toggleEdit} saved={saved} toggleSaved={toggleSaved}/>
               <div className="flex items-start p-4 gap-120">
                 <div className="flex flex-col gap-2">
                   <div className="flex flex-row justify-center items-center gap-5">
diff --git a/components/admin/Table.tsx b/components/admin/Table.tsx
index 2f73e1e..8fb7e14 100644
--- a/components/admin/Table.tsx
+++ b/components/admin/Table.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import React, { FC, useState } from "react";
 import DropdownMenu from "./DropdownMenu";
 import { Avatar } from "./Profile";
 import Tabs from "./Tabs";
@@ -9,6 +9,7 @@ import TableTitle from "./DashboardTableTitle";
 import ApplicationsTable from "./ApplicationsTable";
 import ApplicantRole from "entities/applicationRole";
 import ReviewTable from "./ReviewTable";
+import { set } from "firebase/database";
 
 export enum OrganizationalArea {
   Engineering = "Engineering",
@@ -35,6 +36,18 @@ const Table: FC = () => {
   const [selectedDropdownItem, setSelectedDropdownItem] =
     React.useState<string>("Delegation Dashboard");
 
+  const [edit, setEdit] = useState(false);
+
+  const toggleEdit = () => {
+    setEdit(!edit);
+  }
+
+  const [saved, setSaved] = useState(false);
+
+  const toggleSaved = () => {
+    setSaved(!saved);
+  }
+
   const handleDropdownChange = (selectedItem: string) => {
     setSelectedDropdownItem(selectedItem);
   };
@@ -80,6 +93,10 @@ const Table: FC = () => {
           numSecondChoiceEntries={numSecondChoiceEntries}
           setWhichChoiceTab={setWhichChoiceTab}
           whichChoiceTab={whichChoiceTab}
+          edit={edit}
+          toggleEdit={toggleEdit}
+          saved={saved}
+          toggleSaved={toggleSaved}
         />
         {selectedDropdownItem === "Review Dashboard" && (
           <ReviewTable
@@ -89,6 +106,10 @@ const Table: FC = () => {
             numFirstChoiceEntries={numFirstChoiceEntries}
             setNumSecondChoiceEntries={setNumSecondChoiceEntries}
             numSecondChoiceEntries={numSecondChoiceEntries}
+            edit={edit}
+            toggleEdit={toggleEdit}
+            saved={saved}
+            toggleSaved={toggleSaved}
           />
         )}
         {selectedDropdownItem === "Delegation Dashboard" && (
diff --git a/graphql/queries.ts b/graphql/queries.ts
index 9a6bd37..075c789 100644
--- a/graphql/queries.ts
+++ b/graphql/queries.ts
@@ -17,6 +17,12 @@ export const mutations = {
     refresh(refreshToken: $refreshToken)
   }
 `,
+  changeRating: `
+  mutation changeRating($id: Int!, $ratingToBeChanged: String!, $newValue: Int!) {
+    changeRating(id: $id, ratingToBeChanged: $ratingToBeChanged, newValue: $newValue) {
+      id
+    }
+  }`,
 };
 
 // TODO: add functionaltiy to getRole in case accessToken expired and needs to be refreshed.
@@ -79,10 +85,13 @@ export const applicationTableQueries = {
                   lastName
               }
               reviewDashboards {
+                  reviewerId
                   passionFSG
                   teamPlayer
                   desireToLearn
+                  skill
                   skillCategory
+                  reviewerComments    
               }
               }
             }