diff --git a/frontend/components/profile/tickets/new/NewAttachment.vue b/frontend/components/profile/tickets/new/NewAttachment.vue
new file mode 100644
index 0000000..bb9d62c
--- /dev/null
+++ b/frontend/components/profile/tickets/new/NewAttachment.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+// imports
+
+import useDeleteAttachment from "~/composables/api/tickets/useDeleteAttachment";
+
+// types
+
+type Props = {
+    id: number;
+    size: number;
+    name: string;
+};
+
+type Emits = {
+    delete: [value: number];
+};
+
+// props
+
+defineProps<Props>();
+
+// Emits
+
+const emit = defineEmits<Emits>();
+
+// queries
+
+const { mutateAsync: deleteAttachment, isPending: deleteAttachmentPending } =
+    useDeleteAttachment();
+
+const handleDeleteAttachment = (id: number) => {
+    deleteAttachment(
+        { id },
+        {
+            onSuccess: () => {
+                emit("delete", id);
+            },
+        }
+    );
+};
+</script>
+
+<template>
+    <li class="w-full flex items-center">
+        <div class="w-2/12 flex justify-start">
+            <p class="text-sm text-black">{{ (size / 1024).toFixed(2) }}KB</p>
+        </div>
+        <div class="flex justify-end w-9/12">
+            <p class="text-sm text-black">
+                {{ name }}
+            </p>
+        </div>
+        <div class="w-1/12 ps-1">
+            <button class="cursor-pointer" @click="handleDeleteAttachment(id)">
+                <Icon
+                    :name="
+                        deleteAttachmentPending
+                            ? 'svg-spinners:ring-resize'
+                            : 'ci:close'
+                    "
+                    :class="
+                        deleteAttachmentPending
+                            ? 'text-black/50'
+                            : '**:stroke-red-500'
+                    "
+                    class="pt-1"
+                    size="28"
+                />
+            </button>
+        </div>
+    </li>
+</template>
+
+<style scoped></style>