diff --git a/src/components/modals/material.tsx b/src/components/modals/material.tsx
index 98536ea641796e9d5b4853ce9108f19d48e3b3b2..6b30a5460b64e6c65c8adca74b8f2c3afafed48f 100644
--- a/src/components/modals/material.tsx
+++ b/src/components/modals/material.tsx
@@ -506,7 +506,7 @@ export function DeleteMaterialModal({
     const handleDeleteMaterial = async () => {
         try {
             setIsLoading(true);
-            const response = await newAxiosInstance.delete(`${config.REST_API_URL}/modul/${materialId}`);
+            const response = await newAxiosInstance.delete(`${config.REST_API_URL}/material/${materialId}`);
 
             console.log('Material Deleted successfully:', response.data.message);
 
diff --git a/src/pages/Materials.tsx b/src/pages/Materials.tsx
index 7cff6ccfab20289667bdb6ae0a81576226d41f2b..898babfb9643c2bc299162a3ad691d653afdc0a7 100644
--- a/src/pages/Materials.tsx
+++ b/src/pages/Materials.tsx
@@ -128,7 +128,7 @@ const ModuleMaterials = () => {
     }
 
     // HANDLING DELETE MODULE
-    const [isModalDeleteOpen, setIsModalDeleteModuleOpen] = useState(false);
+    const [isModalDeleteModuleOpen, setIsModalDeleteModuleOpen] = useState(false);
     const handleOpenDeleteModule = (id: number) => {
         setIdSelectedModules(id);
         openModalDeleteModule();
@@ -203,22 +203,22 @@ const ModuleMaterials = () => {
         getMaterials(idSelectedModules);
     }
 
-    // // HANDLING DELETE MATERIAL
-    // const [isModalDeleteOpen, setIsModalDeleteMaterialOpen] = useState(false);
-    // const handleOpenDeleteMaterial = (id: number) => {
-    //     setIdSelectedMaterials(id);
-    //     openModalDeleteMaterial();
-    // }
-    // const openModalDeleteMaterial = () => {
-    //     setIsModalDeleteMaterialOpen(true);
-    // };
-    // const closeModalDeleteMaterial = () => {
-    //     setIsModalDeleteMaterialOpen(false);
-    // };
-    // const successDeleteMaterial = () => {
-    //     setIsModalDeleteMaterialOpen(false);
-    //     setRefreshMaterial((prevRefresh) => !prevRefresh);
-    // }
+    // HANDLING DELETE MATERIAL
+    const [isModalDeleteMaterialOpen, setIsModalDeleteMaterialOpen] = useState(false);
+    const handleOpenDeleteMaterial = (id: number) => {
+        setIdSelectedMaterials(id);
+        openModalDeleteMaterial();
+    }
+    const openModalDeleteMaterial = () => {
+        setIsModalDeleteMaterialOpen(true);
+    };
+    const closeModalDeleteMaterial = () => {
+        setIsModalDeleteMaterialOpen(false);
+    };
+    const successDeleteMaterial = () => {
+        setIsModalDeleteMaterialOpen(false);
+        getMaterials(idSelectedModules);
+    }
 
     return (
         <Container overflow="auto" maxW={"100vw"} maxH={"100vh"}>
@@ -238,7 +238,7 @@ const ModuleMaterials = () => {
                 moduleId={idSelectedModules}
             />
             <DeleteModuleModal
-                isOpen={isModalDeleteOpen}
+                isOpen={isModalDeleteModuleOpen}
                 onClose={closeModalDeleteModule}
                 successDelete={successDeleteModule}
                 moduleId={idSelectedModules}
@@ -258,6 +258,12 @@ const ModuleMaterials = () => {
                 successEdit={successEditMaterial}
                 materialId={idSelectedMaterials}
             />
+            <DeleteMaterialModal
+                isOpen={isModalDeleteMaterialOpen}
+                onClose={closeModalDeleteMaterial}
+                successDelete={successDeleteMaterial}
+                materialId={idSelectedMaterials}
+            />
 
             <HStack align="start" justify="center">
                 <VStack maxW="20%" maxH="95vh" mt="1rem">
@@ -385,7 +391,10 @@ const ModuleMaterials = () => {
                                                         color={"#564c95"}
                                                         _hover={{ color: "green" }}
                                                         cursor={"pointer"}
-                                                        onClick={() => handleOpenEditMaterial(item.id)}
+                                                        onClick={(e) => {
+                                                            e.stopPropagation(); // Stop event propagation
+                                                            handleOpenEditMaterial(item.id);
+                                                        }}
                                                     ></Icon>
                                                     <Icon
                                                         as={BiSolidTrash}
@@ -393,7 +402,10 @@ const ModuleMaterials = () => {
                                                         color={"#564c95"}
                                                         _hover={{ color: "red" }}
                                                         cursor={"pointer"}
-                                                    // onClick={() => openModalDelete(item.id)}
+                                                        onClick={(e) => {
+                                                            e.stopPropagation(); // Stop event propagation
+                                                            handleOpenDeleteMaterial(item.id);
+                                                        }}
                                                     ></Icon>
                                                 </AccordionButton>
                                                 <AccordionPanel>