diff --git a/resources/js/components/inputs/file-upload-multiple.tsx b/resources/js/components/inputs/file-upload-multiple.tsx
index 993a6ba..ed0fabf 100644
--- a/resources/js/components/inputs/file-upload-multiple.tsx
+++ b/resources/js/components/inputs/file-upload-multiple.tsx
@@ -108,7 +108,7 @@ export function FileUploadMultiple({
                         <button
                             type="button"
                             onClick={() => handleRemove(index)}
-                            className="absolute right-1 top-1 rounded-full bg-black/60 p-0.5 text-white opacity-0 transition-opacity hover:bg-black/80 group-hover:opacity-100"
+                            className="absolute right-1 top-1 rounded-full bg-destructive p-0.5 text-white hover:bg-destructive/80"
                         >
                             <X className="h-3 w-3" />
                         </button>
diff --git a/resources/js/components/inputs/file-upload.tsx b/resources/js/components/inputs/file-upload.tsx
index 27cd5f5..70370e4 100644
--- a/resources/js/components/inputs/file-upload.tsx
+++ b/resources/js/components/inputs/file-upload.tsx
@@ -226,6 +226,7 @@ export function FileUpload({
                     <AttachmentActions>
                         <AttachmentAction
                             aria-label="Hapus file"
+                            variant="destructive"
                             onClick={handleRemove}
                         >
                             <X />