diff --git a/src/components/Assignment/AssignmentCards.tsx b/src/components/Assignment/AssignmentCards.tsx
index e29f1accff99fd666b5c7a0e2a292da388982f65..de6b90059990b52854a91f15f445be8dad7dd5f3 100644
--- a/src/components/Assignment/AssignmentCards.tsx
+++ b/src/components/Assignment/AssignmentCards.tsx
@@ -8,19 +8,12 @@ import {
   IconButton,
   Tooltip,
   Heading,
-  Text,
-  AlertDialog,
-  AlertDialogBody,
-  AlertDialogContent,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogOverlay,
-  Button
+  Text
 } from "@chakra-ui/react"
-import axios from "axios"
 import React from "react"
 import { FiEdit } from "react-icons/fi"
 import { Link } from "react-router-dom"
+import { DeleteAssignmentDialog } from "./DeletAssignmentDialog"
 
 export interface AssignmentCardsProps {
   index: Number
@@ -47,56 +40,6 @@ export const AssignmentCards = ({
   const onDelete = () => {
     setIsOpen(true)
   }
-  const cancelRef = React.useRef<any>()
-
-  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
@@ -177,7 +120,13 @@ export const AssignmentCards = ({
             />
           </Tooltip>
 
-          <DeleteAlertDialog isOpen={isOpen} onClose={onClose} />
+          <DeleteAssignmentDialog
+            isOpen={isOpen}
+            onClose={onClose}
+            scholarship_id={scholarship_id}
+            assignment_id={assignment_id}
+            onDeleteSuccess={onDeleteSuccess}
+          />
         </Stack>
       </Stack>
     </Box>
diff --git a/src/components/Assignment/DeletAssignmentDialog.tsx b/src/components/Assignment/DeletAssignmentDialog.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..5be68f2331945f7b5af1f3390c43d0dd5bffc880
--- /dev/null
+++ b/src/components/Assignment/DeletAssignmentDialog.tsx
@@ -0,0 +1,72 @@
+import React from "react"
+import {
+  AlertDialog,
+  AlertDialogBody,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogOverlay,
+  Button
+} from "@chakra-ui/react"
+import axios from "axios"
+
+interface DeleteAlertDialogProps {
+  isOpen: boolean
+  onClose: () => void
+  scholarship_id: Number
+  assignment_id: Number
+  onDeleteSuccess: () => void
+}
+
+export const DeleteAssignmentDialog: React.FC<DeleteAlertDialogProps> = ({
+  isOpen,
+  onClose,
+  scholarship_id,
+  assignment_id,
+  onDeleteSuccess
+}) => {
+  async function DeleteAssignment() {
+    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 (
+    <AlertDialog
+      isOpen={isOpen}
+      onClose={onClose}
+      leastDestructiveRef={React.useRef<any>()}
+      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>
+  )
+}