diff --git a/src/components/Assignment/AssignmentCards.tsx b/src/components/Assignment/AssignmentCards.tsx
index 99085dedfd0244fe801ecb60138eab325b7b5cab..e29f1accff99fd666b5c7a0e2a292da388982f65 100644
--- a/src/components/Assignment/AssignmentCards.tsx
+++ b/src/components/Assignment/AssignmentCards.tsx
@@ -1,12 +1,23 @@
-import { ViewIcon } from "@chakra-ui/icons"
+import { DeleteIcon, ViewIcon } from "@chakra-ui/icons"
 import {
   useColorModeValue,
   chakra,
   Stack,
-  Button,
   Icon,
-  Box
+  Box,
+  IconButton,
+  Tooltip,
+  Heading,
+  Text,
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  Button
 } from "@chakra-ui/react"
+import axios from "axios"
 import React from "react"
 import { FiEdit } from "react-icons/fi"
 import { Link } from "react-router-dom"
@@ -17,80 +28,157 @@ export interface AssignmentCardsProps {
   assignment_id: Number
   assignment_name: string
   assignment_description: string
+  onDeleteSuccess: () => void
 }
 
-export const AssignmentCards: React.FC<AssignmentCardsProps> = (props) => {
+export const AssignmentCards = ({
+  index,
+  scholarship_id,
+  assignment_id,
+  assignment_name,
+  assignment_description,
+  onDeleteSuccess
+}: AssignmentCardsProps) => {
+  // TODO: SET THE APPLICANTS AND SUBMSISSIONS @MATTHEW MAHENDRA
   const [applicants, setApplicants] = React.useState(0)
   const [submissions, setSubmissions] = React.useState(0)
-  const {
-    scholarship_id,
-    assignment_id,
-    assignment_name,
-    assignment_description
-  } = props
+  const [isOpen, setIsOpen] = React.useState(false)
+  const onClose = () => setIsOpen(false)
+  const onDelete = () => {
+    setIsOpen(true)
+  }
+  const cancelRef = React.useRef<any>()
 
-  // TODO: SET THE APPLICANTS AND SUBMSISSIONS @MATTHEW MAHENDRA
+  function DeleteAlertDialog({ isOpen, onClose }: any) {
+    return (
+      <AlertDialog
+        isOpen={isOpen}
+        onClose={onClose}
+        leastDestructiveRef={cancelRef}
+        isCentered
+        motionPreset="slideInBottom"
+      >
+        <AlertDialogOverlay sx={{ backdropFilter: "blur(10px)" }}>
+          <AlertDialogContent>
+            <AlertDialogHeader fontSize="lg" fontWeight="bold">
+              Delete Assignment
+            </AlertDialogHeader>
+
+            <AlertDialogBody>
+              Are you sure? You can't undo this action afterwards.
+            </AlertDialogBody>
+
+            <AlertDialogFooter>
+              <Button onClick={onClose}>Cancel</Button>
+              <Button colorScheme="red" ml={3} onClick={DeleteAssignment}>
+                Delete
+              </Button>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialogOverlay>
+      </AlertDialog>
+    )
+  }
+
+  async function DeleteAssignment() {
+    // send delete request to backend
+    try {
+      const URL =
+        process.env.REACT_APP_API_URL +
+        "/api/assignment/" +
+        scholarship_id +
+        "/" +
+        assignment_id
+      const response = await axios.delete(URL)
+      console.log(response)
+      onClose()
+      onDeleteSuccess()
+    } catch (error) {
+      console.error("Error deleting assignment:", error)
+    }
+  }
 
   return (
     <Box
       boxShadow={"lg"}
       width={"full"}
-      maxW={"1048px"}
       rounded={"xl"}
+      justifyContent={"center"}
+      alignContent={"center"}
+      minW={{ base: "90%", md: "450px" }}
+      maxW={{ base: "90%", md: "900px" }}
+      mx={"auto"}
       p={10}
       position={"relative"}
       bg={useColorModeValue("white", "gray.800")}
       textAlign={"left"}
     >
-      <chakra.h1
+      <Heading
         fontSize={"2xl"}
         fontWeight={"bold"}
         color={useColorModeValue("gray.800", "white")}
         mt={2}
       >
         {assignment_name}
-      </chakra.h1>
-      <chakra.p fontWeight={"medium"} fontSize={"15px"} pb={4}>
+      </Heading>
+      <Text
+        color={useColorModeValue("gray.800", "white")}
+        fontSize={"sm"}
+        pt={4}
+        textAlign={"justify"}
+      >
         {assignment_description}
-      </chakra.p>
+      </Text>
       <Stack
-        direction={{ base: "column", md: "row" }}
-        align="center"
-        m="1rem"
-        justifyContent={"center"}
+        direction={"row"}
+        align="start"
+        mt="1rem"
+        justifyContent={"space-between"}
         spacing={"5"}
       >
-        <chakra.p fontWeight={"bold"} fontSize={14}>
-          Submissions:
-          <chakra.span fontWeight={"medium"} color={"gray.500"}>
-            {" "}
+        <Text 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} />}
+        </Text>
+        <Stack direction="row" spacing="2">
+          <Link
+            to={`/scholarships/${scholarship_id}/assignments/${assignment_id}/submissions`}
           >
-            View Submissions
-          </Button>
-        </Link>
-        <Link
-          to={`/scholarships/${scholarship_id}/assignments/${assignment_id}/edit`}
-        >
-          <Button
-            variant="ghost"
-            colorScheme="blue"
-            size="sm"
-            leftIcon={<Icon as={FiEdit} />}
+            <Tooltip label="View Submissions" aria-label="A tooltip">
+              <IconButton
+                aria-label="View Submissions"
+                colorScheme="green"
+                size="sm"
+                icon={<Icon as={ViewIcon} />}
+              />
+            </Tooltip>
+          </Link>
+          <Link
+            to={`/scholarships/${scholarship_id}/assignments/${assignment_id}/edit`}
           >
-            Edit Assignment
-          </Button>
-        </Link>
+            <Tooltip label="Edit Assignment" aria-label="A tooltip">
+              <IconButton
+                aria-label="Edit Assignment"
+                icon={<Icon as={FiEdit} />}
+                colorScheme="blue"
+                size="sm"
+              />
+            </Tooltip>
+          </Link>
+          <Tooltip label="Delete Assignment" aria-label="A tooltip">
+            <IconButton
+              aria-label="Delete Assignment"
+              icon={<DeleteIcon />}
+              colorScheme="red"
+              size="sm"
+              onClick={onDelete}
+            />
+          </Tooltip>
+
+          <DeleteAlertDialog isOpen={isOpen} onClose={onClose} />
+        </Stack>
       </Stack>
     </Box>
   )
diff --git a/src/components/Assignment/AssignmentDetails.tsx b/src/components/Assignment/AssignmentDetails.tsx
index 3ac73d3bea0ccae165a8a89d93665ef90c7a4866..d7b8c06751e95f255f34ee0274dd9fe748039035 100644
--- a/src/components/Assignment/AssignmentDetails.tsx
+++ b/src/components/Assignment/AssignmentDetails.tsx
@@ -31,11 +31,10 @@ import { Field, Form, Formik } from "formik"
 import { AssignmentCards, AssignmentCardsProps } from "./AssignmentCards"
 
 interface CreateAssignmentModalProps {
-  afterCreate: () => void;
+  afterCreate: () => void
 }
 
 const useFetchAssignments = () => {
-  console.log("useFetchAssignments")
   const [assignments, setAssignments] = useState([])
   const { scholarshipid } = useParams()
 
@@ -47,6 +46,7 @@ const useFetchAssignments = () => {
       setAssignments(response.data.data)
     } catch (error) {
       console.error("Error fetching assignments:", error)
+      setAssignments([])
     }
   }
 
@@ -176,20 +176,20 @@ function CreateAssignmentModal({ afterCreate }: CreateAssignmentModalProps) {
 
 const AssignmentDetails = () => {
   const { assignments, fetchAssignments } = useFetchAssignments()
-  const [shouldFetchAssignments, setShouldFetchAssignments] = useState(true);
+  const [shouldFetchAssignments, setShouldFetchAssignments] = useState(true)
 
   useEffect(() => {
     if (shouldFetchAssignments) {
-      fetchAssignments();
-      setShouldFetchAssignments(false);
+      fetchAssignments()
+      setShouldFetchAssignments(false)
     }
-  }, [fetchAssignments, shouldFetchAssignments]);
+  }, [fetchAssignments, shouldFetchAssignments])
 
   return (
     <Flex
       textAlign={"center"}
-      pt={10}
       justifyContent={"center"}
+      pt={10}
       direction={"column"}
       width={"full"}
       overflow={"hidden"}
@@ -200,7 +200,7 @@ const AssignmentDetails = () => {
         </Heading>
       </Box>
       <SimpleGrid columns={1} spacing={"5"} mt={16} mb={10} mx={"auto"}>
-        <CreateAssignmentModal 
+        <CreateAssignmentModal
           afterCreate={() => setShouldFetchAssignments(true)}
         />
         {assignments.length > 0 ? (
@@ -212,6 +212,9 @@ const AssignmentDetails = () => {
               scholarship_id={assignment.scholarship_id}
               assignment_name={assignment.assignment_name}
               assignment_description={assignment.assignment_description}
+              onDeleteSuccess={() => {
+                setShouldFetchAssignments(true)
+              }}
             />
           ))
         ) : (