diff --git a/src/components/Assignment/AssignmentCards.tsx b/src/components/Assignment/AssignmentCards.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..147fb55e515d3f31f9b68d0cfac7ed51144e2d1d
--- /dev/null
+++ b/src/components/Assignment/AssignmentCards.tsx
@@ -0,0 +1,97 @@
+import { ViewIcon } from "@chakra-ui/icons"
+import {
+  useColorModeValue,
+  chakra,
+  Stack,
+  Button,
+  Icon,
+  Box
+} from "@chakra-ui/react"
+import React from "react"
+import { FiEdit } from "react-icons/fi"
+import { Link } from "react-router-dom"
+
+interface AssignmentCardsProps {
+  index: Number
+  scholarship_id: Number
+  assignment_id: Number
+  assignment_name: string
+  assignment_description: string
+}
+
+export const AssignmentCards: React.FC<AssignmentCardsProps> = (props) => {
+  const [applicants, setApplicants] = React.useState(0)
+  const [submissions, setSubmissions] = React.useState(0)
+  const {
+    scholarship_id,
+    assignment_id,
+    assignment_name,
+    assignment_description
+  } = props
+
+  // TODO: SET THE APPLICANTS AND SUBMSISSIONS @MATTHEW MAHENDRA
+
+  return (
+    <Box
+      boxShadow={"lg"}
+      width={"full"}
+      maxW={"1048px"}
+      rounded={"xl"}
+      p={10}
+      position={"relative"}
+      bg={useColorModeValue("white", "gray.800")}
+      textAlign={"left"}
+    >
+      <chakra.h1
+        fontSize={"2xl"}
+        fontWeight={"bold"}
+        color={useColorModeValue("gray.800", "white")}
+        mt={2}
+      >
+        {assignment_name}
+      </chakra.h1>
+      <chakra.p fontWeight={"medium"} fontSize={"15px"} pb={4}>
+        {assignment_description}
+      </chakra.p>
+      <Stack
+        direction={{ base: "column", md: "row" }}
+        align="center"
+        m="1rem"
+        justifyContent={"center"}
+        spacing={"5"}
+      >
+        <chakra.p fontWeight={"bold"} fontSize={14}>
+          Submissions:
+          <chakra.span fontWeight={"medium"} color={"gray.500"}>
+            {" "}
+            {submissions} / {applicants}
+          </chakra.span>
+        </chakra.p>
+        <Link
+          to={`/scholarships/${scholarship_id}/assignments/${assignment_id}/submissions`}
+        >
+          <Button
+            variant="ghost"
+            colorScheme="green"
+            size="sm"
+            leftIcon={<Icon as={ViewIcon} />}
+          >
+            View Submissions
+          </Button>
+        </Link>
+        <Link
+          to={`/scholarships/${scholarship_id}/assignments/${assignment_id}/edit`}
+        >
+          <Button
+            variant="ghost"
+            colorScheme="blue"
+            size="sm"
+            leftIcon={<Icon as={FiEdit} />}
+          >
+            Edit Assignment
+          </Button>
+        </Link>
+      </Stack>
+    </Box>
+  )
+}
diff --git a/src/components/Assignment/AssignmentDetails.tsx b/src/components/Assignment/AssignmentDetails.tsx
index 0098b4a17e18147bfab8d04c0a2c1856339db7d3..37756ef0f1a1512add1deb93de8fed19c6f77e05 100644
--- a/src/components/Assignment/AssignmentDetails.tsx
+++ b/src/components/Assignment/AssignmentDetails.tsx
@@ -1,9 +1,7 @@
-import { ViewIcon } from "@chakra-ui/icons"
 import {
   Box,
   Button,
   ButtonGroup,
-  chakra,
   Flex,
   FormControl,
   FormErrorMessage,
@@ -20,7 +18,6 @@ import {
   ModalOverlay,
   SimpleGrid,
   Spacer,
-  Stack,
   Text,
   Textarea,
   useColorModeValue,
@@ -28,17 +25,10 @@ import {
 } from "@chakra-ui/react"
 import React, { useEffect, useState } from "react"
 import { FiEdit } from "react-icons/fi"
-import { Link, useParams } from "react-router-dom"
+import { useParams } from "react-router-dom"
 import axios from "../../api/axios"
 import { Field, Form, Formik } from "formik"
-
-interface AssignmentCardsProps {
-  index: Number
-  scholarship_id: Number
-  assignment_id: Number
-  assignment_name: string
-  assignment_description: string
-}
+import { AssignmentCards } from "./AssignmentCards"
 
 const useFetchAssignments = () => {
   const [assignments, setAssignments] = useState([])
@@ -180,83 +170,6 @@ function CreateAssignmentModal() {
   )
 }
 
-function AssignmentCards(props: AssignmentCardsProps) {
-  const [applicants, setApplicants] = React.useState(0)
-  const [submissions, setSubmissions] = React.useState(0)
-  const {
-    scholarship_id,
-    assignment_id,
-    assignment_name,
-    assignment_description
-  } = props
-
-  // TODO: SET THE APPLICANTS AND SUBMSISSIONS @MATTHEW MAHENDRA
-
-  return (
-    <Box
-      boxShadow={"lg"}
-      width={"full"}
-      maxW={"1048px"}
-      rounded={"xl"}
-      p={10}
-      position={"relative"}
-      bg={useColorModeValue("white", "gray.800")}
-      textAlign={"left"}
-    >
-      <chakra.h1
-        fontSize={"2xl"}
-        fontWeight={"bold"}
-        color={useColorModeValue("gray.800", "white")}
-        mt={2}
-      >
-        {assignment_name}
-      </chakra.h1>
-      <chakra.p fontWeight={"medium"} fontSize={"15px"} pb={4}>
-        {assignment_description}
-      </chakra.p>
-      <Stack
-        direction={{ base: "column", md: "row" }}
-        align="center"
-        m="1rem"
-        justifyContent={"center"}
-        spacing={"5"}
-      >
-        <chakra.p fontWeight={"bold"} fontSize={14}>
-          Submissions:
-          <chakra.span fontWeight={"medium"} color={"gray.500"}>
-            {" "}
-            {submissions} / {applicants}
-          </chakra.span>
-        </chakra.p>
-        <Link
-          to={`/scholarships/${scholarship_id}/assignments/${assignment_id}/submissions`}
-        >
-          <Button
-            variant="ghost"
-            colorScheme="green"
-            size="sm"
-            leftIcon={<Icon as={ViewIcon} />}
-          >
-            View Submissions
-          </Button>
-        </Link>
-        <Link
-          to={`/scholarships/${scholarship_id}/assignments/${assignment_id}/edit`}
-        >
-          <Button
-            variant="ghost"
-            colorScheme="blue"
-            size="sm"
-            leftIcon={<Icon as={FiEdit} />}
-          >
-            Edit Assignment
-          </Button>
-        </Link>
-      </Stack>
-    </Box>
-  )
-}
-
 const AssignmentDetails = () => {
   const { assignments, fetchAssignments } = useFetchAssignments()