diff --git a/src/components/Assignment/AssignmentCards.tsx b/src/components/Assignment/AssignmentCards.tsx
index 320bd5d0d97c2956fe019bd2e1b5ec6a58c4d2db..a0b4071c1cae9509c377658b37d8b53629ca3cc7 100644
--- a/src/components/Assignment/AssignmentCards.tsx
+++ b/src/components/Assignment/AssignmentCards.tsx
@@ -10,11 +10,12 @@ import {
   Heading,
   Text
 } from "@chakra-ui/react"
-import React from "react"
+import React, { useEffect, useState } from "react"
 import { FiEdit } from "react-icons/fi"
 import { Link } from "react-router-dom"
 import { DeleteAssignmentDialog } from "./DeleteAssignmentDialog"
 import { EditAssignmentModal } from "./EditAssignmentModal"
+import axios from "axios"
 
 export interface AssignmentCardsProps {
   index: Number
@@ -26,6 +27,34 @@ export interface AssignmentCardsProps {
   onEditSuccess: () => void
 }
 
+const useFetchFile = (sid : any, aid : any) => {
+  const [submissionFile, setSubmissionFile] = useState([])
+  const FILE_URL = process.env.REACT_APP_API_URL + "/api/files/scholarship/" + sid + "/assignment/" + aid
+  
+  const fetchFile = async () => {
+    try {
+      const response = await axios.get(FILE_URL)
+      setSubmissionFile(response.data.data.files)
+    } catch (error) {
+      setSubmissionFile([])
+    }
+  }
+
+  return { submissionFile, fetchFile }
+}
+const useFetchStudent = (sid : any) => {
+  const [students, setStudents] = useState([])
+  const STUDENT_URL = process.env.REACT_APP_API_URL + '/api/scholarship/user/' + sid
+  const fetchStudent = async () => {
+    try {
+      const response = await axios.get(STUDENT_URL);
+      setStudents(response.data.data.scholarships);
+    } catch (err : any) {
+      console.log(err)
+    }
+  }
+  return {students, fetchStudent}
+}
 export const AssignmentCards = ({
   index,
   scholarship_id,
@@ -35,12 +64,28 @@ export const AssignmentCards = ({
   onDeleteSuccess,
   onEditSuccess
 }: AssignmentCardsProps) => {
+  const { submissionFile, fetchFile } = useFetchFile(scholarship_id, assignment_id);
+  const { students, fetchStudent} = useFetchStudent(scholarship_id);
+  const [applicants, setApplicants] = useState(students.length)
+  const [submissions, setSubmissions] = useState(submissionFile.length)
+  useEffect(() => {
+    const fetchData = async () => {
+      await fetchFile();
+      setSubmissions(submissionFile.length)
+    }
+    fetchData();
+  }, [ submissionFile.length]);
+  useEffect(() => {
+    const fetchData = async () => {
+      await fetchStudent();
+      setApplicants(students.length)
+    }
+    fetchData();
+  }, [students.length])
   // TODO: SET THE APPLICANTS AND SUBMSISSIONS @MATTHEW MAHENDRA
-  const [applicants, setApplicants] = React.useState(0)
-  const [submissions, setSubmissions] = React.useState(0)
-  const [isOpenEditAssignment, setIsOpenEditAssignment] = React.useState(false)
+  const [isOpenEditAssignment, setIsOpenEditAssignment] = useState(false)
   const [isOpenDeleteAssignment, setIsOpenDeleteAssignment] =
-    React.useState(false)
+  React.useState(false)
   const onCloseEditAssignment = () => setIsOpenEditAssignment(false)
   const onCloseDeleteAssignment = () => setIsOpenDeleteAssignment(false)
   const onEditAssignment = () => {
@@ -91,7 +136,7 @@ export const AssignmentCards = ({
         <Text fontWeight="bold" fontSize={14}>
           Submissions:{" "}
           <chakra.span fontWeight="medium" color="gray.500">
-            {submissions} / {applicants}
+            {submissions} files / {applicants} students
           </chakra.span>
         </Text>
         <Stack direction="row" spacing="2">