diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index 116e5550f..f19e041be 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -179,6 +179,7 @@ export default function CollectionCardComponent({
                   onConfirm={() => {
                     onDelete();
                   }}
+                  description={name}
                 >
                   <IconComponent
                     name="Trash2"
@@ -239,6 +240,7 @@ export default function CollectionCardComponent({
                       onConfirm={() => {
                         onDelete();
                       }}
+                      description={name}
                     >
                       <Button
                         variant="ghost"
diff --git a/src/frontend/src/modals/DeleteConfirmationModal/index.tsx b/src/frontend/src/modals/DeleteConfirmationModal/index.tsx
index 4c1e48699..70d8ac430 100644
--- a/src/frontend/src/modals/DeleteConfirmationModal/index.tsx
+++ b/src/frontend/src/modals/DeleteConfirmationModal/index.tsx
@@ -4,7 +4,6 @@ import { Button } from "../../components/ui/button";
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
@@ -26,22 +25,27 @@ export default function DeleteConfirmationModal({
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
-            <div className="flex">
-              Delete <Trash2 className="ml-3 h-4 w-4" strokeWidth={1.5} />
+            <div className="flex items-center">
+              <span className="pr-2">Delete</span>
+              <Trash2
+                className="h-6 w-6 pl-1 text-foreground"
+                strokeWidth={1.5}
+              />
             </div>
           </DialogTitle>
-          <DialogDescription>
-            Are you sure you want to delete this {description ?? "component"}?
-            <br></br>
-            This action cannot be undone.
-          </DialogDescription>
         </DialogHeader>
+        <span>
+          Are you sure you want to delete this {description ?? "component"}?
+          <br></br>
+          This action cannot be undone.
+        </span>
         <DialogFooter>
           <DialogClose>
             <Button className="mr-3">Cancel</Button>
 
             <Button
               type="submit"
+              variant="destructive"
               onClick={() => {
                 onConfirm();
               }}
diff --git a/src/frontend/src/pages/MainPage/components/components/index.tsx b/src/frontend/src/pages/MainPage/components/components/index.tsx
index d1b21bbd9..5f8f06c06 100644
--- a/src/frontend/src/pages/MainPage/components/components/index.tsx
+++ b/src/frontend/src/pages/MainPage/components/components/index.tsx
@@ -43,7 +43,14 @@ export default function ComponentsComponent({
     e.preventDefault();
     if (e.dataTransfer.types.some((types) => types === "Files")) {
       if (e.dataTransfer.files.item(0).type === "application/json") {
-        uploadFlow(true, e.dataTransfer.files.item(0)!);
+        try {
+          uploadFlow(true, e.dataTransfer.files.item(0)!);
+        } catch (error: any) {
+          setErrorData({
+            title: "Error uploading file",
+            list: [error.message],
+          });
+        }
       } else {
         setErrorData({
           title: "Invalid file type",