diff --git a/callbacks/admin/rc/proforma.ts b/callbacks/admin/rc/proforma.ts
index 82641233..bc038205 100644
--- a/callbacks/admin/rc/proforma.ts
+++ b/callbacks/admin/rc/proforma.ts
@@ -9,6 +9,7 @@ import {
   setConfig,
 } from "@callbacks/constants";
 import { errorNotification, successNotification } from "@callbacks/notifcation";
+import { CountResponse } from "./stats";
 
 interface nullBool {
   Bool: boolean;
@@ -91,4 +92,33 @@ const requestProforma = {
       }),
 };
 
+export const getCompanyRecruitCountRequest = {
+  post: (token: string, cids: number[]) =>
+    instance
+      .post<StatusResponse, AxiosResponse<CountResponse>>(
+        `/rc/0/company/count`,
+        cids,
+        setConfig(token)
+      )
+      .then((res) => res.data)
+      .catch((err: ErrorType) => {
+        errorNotification("Registration Failed", err.response?.data?.error);
+        return { ppoCount: 0, recruitCount: 0 };
+      }),
+};
+
+export const getCompanyStatsRequest = {
+  get: (token: string, rcid: string, cid: string) =>
+    instance
+      .get(`/rc/${rcid}/company/${cid}/stats`, setConfig(token))
+      .then(responseBody)
+      .catch((err: ErrorType) => {
+        errorNotification(
+          "Error in fetching data",
+          err.response?.data?.error || err.message
+        );
+        return { student: [] };
+      }),
+};
+
 export default requestProforma;
diff --git a/callbacks/admin/rc/rc.ts b/callbacks/admin/rc/rc.ts
index ef5fbbc4..f998f5b8 100644
--- a/callbacks/admin/rc/rc.ts
+++ b/callbacks/admin/rc/rc.ts
@@ -83,4 +83,19 @@ export const rcRequest = {
       }),
 };
 
+
+export const getCompanyRCIDRequest = {
+  get: (token: string, cid: string) =>
+    instance
+      .get(`/0/company/${cid}/ids`, setConfig(token))
+      .then(responseBody)
+      .catch((err: ErrorType) => {
+        errorNotification(
+          "No Record Found",
+          err.response?.data?.error || err.message
+        );
+        return null;
+      }),
+};
+
 export default rcRequest;
diff --git a/callbacks/admin/rc/stats.ts b/callbacks/admin/rc/stats.ts
index b7e42206..9db1287c 100644
--- a/callbacks/admin/rc/stats.ts
+++ b/callbacks/admin/rc/stats.ts
@@ -40,6 +40,15 @@ export interface Stats {
   branch: BranchStats[];
 }
 
+export interface CountResponse {
+  recruitCounts: {
+    [key: string]: number;
+  };
+  ppoCount: {
+    [key: string]: number;
+  };
+}
+
 const instance = axios.create({
   baseURL: ADMIN_APPLICATION_URL,
   timeout: 15000,
diff --git a/sections/PastHires.tsx b/sections/PastHires.tsx
index 293cd056..e92a095c 100644
--- a/sections/PastHires.tsx
+++ b/sections/PastHires.tsx
@@ -1,10 +1,19 @@
 import { IconButton, Stack } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { useRouter } from "next/router";
 
 import DataGrid from "@components/DataGrid";
 import ActiveButton from "@components/Buttons/ActiveButton";
+import {
+  getCompanyRecruitCountRequest,
+  getCompanyStatsRequest,
+} from "@callbacks/admin/rc/proforma";
+import useStore from "@store/store";
+import { getDeptProgram } from "@components/Parser/parser";
+import { getCompanyRCIDRequest } from "@callbacks/admin/rc/rc";
 
 const PastHireColumns: GridColDef[] = [
   {
@@ -12,6 +21,12 @@ const PastHireColumns: GridColDef[] = [
     headerName: "ID",
     width: 150,
   },
+  {
+    field: "rid",
+    headerName: "RecruitmentCycleID",
+    width: 150,
+  },
+
   {
     field: "RecruitmentDrive",
     headerName: "Recruitment Drive",
@@ -46,14 +61,143 @@ const PastHireColumns: GridColDef[] = [
     ),
   },
 ];
+const PastHireDataColumns: GridColDef[] = [
+  {
+    field: "id",
+    headerName: "ID",
+    width: 150,
+  },
+  {
+    field: "name",
+    headerName: "Name",
+    width: 150,
+  },
+  {
+    field: "profile",
+    headerName: "Profile",
+    width: 375,
+  },
+  {
+    field: "email",
+    headerName: "Email",
+    hide: true,
+    width: 300,
+  },
+  {
+    field: "roll_no",
+    headerName: "Roll No.",
+    width: 300,
+  },
+  {
+    field: "Program Department",
+    headerName: "Branch",
+    sortable: false,
+    valueGetter: (params) => getDeptProgram(params.row.program_department_id),
+  },
+];
 
-const pastHireRows: never[] = [];
 function PastHires() {
+  const { token } = useStore();
+  const router = useRouter();
+  const companyId = router.query.companyId?.toString() || "";
+  const [showGrid, setShowGrid] = useState(false);
+  const [rows, setRows] = useState<any>({ student: [] });
+  const [pastHireRows, setPastRows] = useState<any>([]);
+  const [loading, setLoading] = useState(false);
+
+  // Add a function to handle button click
+  const handleButtonClick = async (id: number, cid: number) => {
+    setLoading(true);
+    setShowGrid(true);
+    let response = await getCompanyStatsRequest.get(
+      token,
+      id.toString(),
+      cid.toString()
+    );
+    if (response.student) {
+      setRows(response);
+    } else {
+      setRows({ student: [] });
+    }
+    setLoading(false);
+  };
+  useEffect(() => {
+    setLoading(true);
+    const getRCs = async () => {
+      let response = await getCompanyRCIDRequest.get(token, companyId);
+      const newPastHireRows: {
+        id: any;
+        rid: any;
+        RecruitmentDrive: any;
+        TotalHires: any;
+        PIOPPO: any;
+      }[] = [];
+
+      const cidArray: number[] = [];
+      for (let i = 0; i < response.length; i += 1) {
+        cidArray.push(response[i].id);
+      }
+      let countResponse: any = await getCompanyRecruitCountRequest.post(
+        token,
+        cidArray
+      );
+      console.log(countResponse);
+      for (let i = 0; i < response.length; i += 1) {
+        newPastHireRows.push({
+          id: response[i].id,
+          rid: response[i].recruitment_cycle_id,
+          RecruitmentDrive: `${response[i].type} ${response[i].phase}`,
+          TotalHires: countResponse.recruitCounts[response[i].id] || 0,
+          PIOPPO: countResponse.ppoCount[response[i].id] || 0,
+        });
+      }
+      setPastRows(newPastHireRows);
+      setLoading(false);
+    };
+    getRCs();
+  }, [token, companyId]);
+
   return (
     <div>
-      <h2>Past Hires</h2>
-      <DataGrid rows={pastHireRows} columns={PastHireColumns} />
+      <Stack>
+        <Stack
+          direction="row"
+          spacing={3}
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <h2>Past Hires</h2>
+          <div>
+            {showGrid && (
+              <IconButton
+                onClick={() => {
+                  setShowGrid(false);
+                }}
+              >
+                <ArrowBackIcon />
+              </IconButton>
+            )}
+          </div>
+        </Stack>
+      </Stack>
+      {showGrid ? (
+        <DataGrid
+          rows={rows.student}
+          columns={PastHireDataColumns}
+          getRowId={(row) => row.id}
+          loading={loading}
+        />
+      ) : (
+        <DataGrid
+          rows={pastHireRows}
+          columns={PastHireColumns}
+          onCellClick={(param) => {
+            handleButtonClick(param.row.rid, param.row.id);
+          }}
+          loading={loading}
+        />
+      )}
     </div>
   );
 }
-export default PastHires;
+export default PastHires;
\ No newline at end of file