diff --git a/.env b/.env
index 2b2ae54d1a8caedaf0e7fa14383239cc5744ae36..ccd2a34314e8e8ac2684f7d1353152119c83d284 100644
--- a/.env
+++ b/.env
@@ -1,2 +1 @@
-REST_URL="http://localhost:8000/api"
-URL_PATH_FILE="http://localhost:8000/public/file/"
\ No newline at end of file
+REST_URL="http://localhost:8000/api"
\ No newline at end of file
diff --git a/.env.example b/.env.example
index 2b2ae54d1a8caedaf0e7fa14383239cc5744ae36..ccd2a34314e8e8ac2684f7d1353152119c83d284 100644
--- a/.env.example
+++ b/.env.example
@@ -1,2 +1 @@
-REST_URL="http://localhost:8000/api"
-URL_PATH_FILE="http://localhost:8000/public/file/"
\ No newline at end of file
+REST_URL="http://localhost:8000/api"
\ No newline at end of file
diff --git a/src/components/modals/material.tsx b/src/components/modals/material.tsx
index f12736382019d98658a950a4e9be9de9075f1027..613e163645c59ca0863361ef54e863e51f6d1416 100644
--- a/src/components/modals/material.tsx
+++ b/src/components/modals/material.tsx
@@ -41,7 +41,7 @@ export function AddMaterialModal({
     const [isLoading, setIsLoading] = useState(false);
     const newAxiosInstance = axios.create(axiosConfig());
     const [fileType, setFileType] = useState("");
-    const [filePath, setFilePath] = useState("");
+    const [fileName, setFileName] = useState("");
     const [selectedFile, setSelectedFile] = useState<File | null>(null);
     const [isAllValid, setIsAllValid] = useState({
         title: false,
@@ -60,7 +60,7 @@ export function AddMaterialModal({
                     title: title,
                     description: description,
                     source_type: fileType,
-                    material_path: filePath,
+                    material_path: fileName,
                     modul_id: moduleId,
                 });
 
@@ -108,7 +108,9 @@ export function AddMaterialModal({
                 } else {
                     setFileType('PDF');
                 }
-                setFilePath(process.env.URL_PATH_FILE + file.name.replace(/\s/g, ''));
+
+                setFileName(file.name);
+
                 setIsAllValid({ ...isAllValid, file: true });
             } else {
                 setIsAllValid({ ...isAllValid, file: false });
@@ -263,7 +265,7 @@ export function EditMaterialModal({
     const newAxiosInstance = axios.create(axiosConfig());
     const [selectedFile, setSelectedFile] = useState<File | null>(null);
     const [fileType, setFileType] = useState("");
-    const [filePath, setFilePath] = useState("");
+    const [fileName, setFileName] = useState("");
     const [oldFile, setOldFile] = useState("");
     const [isAllValid, setIsAllValid] = useState({
         title: false,
@@ -298,7 +300,7 @@ export function EditMaterialModal({
                 if (isAllValid.file) {
                     upload();
                 } else {
-                    setFilePath(oldFile);
+                    setFileName(oldFile);
                 }
             } catch (error) {
                 console.error('Error uploading:', error);
@@ -307,7 +309,7 @@ export function EditMaterialModal({
                     title: title,
                     description: description,
                     source_type: fileType,
-                    material_path: filePath,
+                    material_path: fileName,
                 });
 
                 console.log('Material edited successfully:', response.data.message);
@@ -329,6 +331,16 @@ export function EditMaterialModal({
 
     const upload = () => {
         const formData = new FormData()
+        if (oldFile) {
+            // Make a delete request to remove the old file
+            newAxiosInstance.delete(`${config.REST_API_URL}/material/deleteFile/${oldFile}`)
+                .then(() => {
+                    console.log('Old file deleted successfully');
+                })
+                .catch((error) => {
+                    console.error('Error deleting old file:', error);
+                });
+        }
         if (selectedFile) {
             formData.append('file', selectedFile)
         }
@@ -350,7 +362,9 @@ export function EditMaterialModal({
                 } else {
                     setFileType('PDF');
                 }
-                setFilePath(process.env.URL_PATH_FILE + file.name.replace(/\s/g, ''));
+
+                setFileName(file.name);
+
                 setIsAllValid({ ...isAllValid, file: true });
             } else {
                 setIsAllValid({ ...isAllValid, file: false });
@@ -504,11 +518,37 @@ export function DeleteMaterialModal({
     materialId,
 }: DeleteMaterialModalProps) {
     const [isLoading, setIsLoading] = useState(false);
+    const [oldFile, setOldFile] = useState("");
     const newAxiosInstance = axios.create(axiosConfig());
 
+    useEffect(() => { // Fetch Data to Get Material Detail
+        const fetchData = async () => {
+            try {
+                setIsLoading(true);
+                const res = await newAxiosInstance.get(`${config.REST_API_URL}/material/${materialId}`);
+                if (res.data.status === 200) {
+                    setOldFile(res.data.data.material_path);
+                } else { }
+                setIsLoading(false);
+            } catch (error) {
+                console.error('Error fetching material data:', error);
+            }
+        };
+        fetchData();
+    }, [materialId]);
+
     const handleDeleteMaterial = async () => {
         try {
             setIsLoading(true);
+            // Make a delete request to remove the old file
+            newAxiosInstance.delete(`${config.REST_API_URL}/material/deleteFile/${oldFile}`)
+                .then(() => {
+                    console.log('Old file deleted successfully');
+                })
+                .catch((error) => {
+                    console.error('Error deleting old file:', error);
+                });
+
             const response = await newAxiosInstance.delete(`${config.REST_API_URL}/material/${materialId}`);
 
             console.log('Material Deleted successfully:', response.data.message);