diff --git a/frontend/components/global/FileInput.vue b/frontend/components/global/FileInput.vue
index a2a0910..e0e3beb 100644
--- a/frontend/components/global/FileInput.vue
+++ b/frontend/components/global/FileInput.vue
@@ -6,11 +6,19 @@ import { useToast } from "~/composables/global/useToast";
 // types
 
 type Props = {
-    modelValue: File[];
+    modelValue: {
+        id: number;
+        file_link: string;
+        date: string;
+        size: number;
+        name: string;
+    }[];
+    loading?: boolean;
 };
 
 type Emits = {
     "update:modelValue": [value: any];
+    change: [value: File];
 };
 
 // props
@@ -50,7 +58,8 @@ const onDrop = (files: File[] | null) => {
         } else {
             if (modelValue.value.length + files.length <= 3) {
                 files?.forEach((item) => {
-                    emit("update:modelValue", [...modelValue.value, item]);
+                    emit("change", item);
+                    resetFileDialog();
                 });
             } else {
                 addToast({
@@ -78,22 +87,27 @@ const { isOverDropZone } = useDropZone(dropZoneRef, {
     dataTypes: ["image/jpeg", "image/png", "image/jpg"],
 });
 
-const { open: openDialog, onChange } = useFileDialog({
+const {
+    open: openDialog,
+    onChange,
+    reset: resetFileDialog,
+} = useFileDialog({
     accept: "image/*",
     directory: false,
 });
 
 onChange((files: any) => {
     let arr: File[] = [];
-    Object.keys(files).forEach((item) => {
-        arr.push(files[item]);
+    Object.keys(files).forEach((_, index) => {
+        arr.push(files[index]);
     });
     onDrop(arr);
 });
 
-const deleteFile = (index: number) => {
+const removeAttachment = (id: number) => {
+    let target = modelValue.value.findIndex((i) => i.id == id);
     const clone = [...modelValue.value];
-    clone.splice(index, 1);
+    clone.splice(target, 1);
     emit("update:modelValue", clone);
 };
 </script>
@@ -103,10 +117,22 @@ const deleteFile = (index: number) => {
         <div
             ref="dropZoneRef"
             @click="openDialog"
-            class="bg-slate-50 flex-col-center w-full transition-all text-black/50 gap-3 h-[20rem] border border-dashed rounded-xl cursor-pointer select-none"
-            :class="isOverDropZone ? 'border-black' : ' border-slate-300'"
+            class="bg-slate-50 relative flex-col-center w-full transition-all text-black/50 gap-3 h-[20rem] border border-dashed rounded-xl cursor-pointer select-none"
+            :class="{
+                'border-black': isOverDropZone,
+                ' border-slate-300': !isOverDropZone,
+                'pointer-events-none': loading,
+            }"
         >
-            <Icon name="bi:file-earmark-arrow-down" size="32" />
+            <Icon
+                :name="
+                    loading
+                        ? 'svg-spinners:ring-resize'
+                        : 'bi:file-earmark-arrow-down'
+                "
+                size="32"
+                :class="loading ? '' : ''"
+            />
             <p class="font-bold text-dynamic-primary text-sm lg:text-[1rem]">
                 برای آپلود کلیک کنید یا فایل خود را اینجا بیاندازید
             </p>
@@ -121,24 +147,12 @@ const deleteFile = (index: number) => {
             v-auto-animate
             class="flex flex-row-reverse items-center justify-between w-full px-2 animate__animated animate__fadeIn"
         >
-            <li class="w-full flex items-center">
-                <div class="flex justify-end w-9/12">
-                    <p class="text-sm text-black">{{ item.name }}</p>
-                </div>
-                <div class="w-2/12">
-                    <p class="text-sm text-black">
-                        {{ (item.size / 1024).toFixed(2) }}KB
-                    </p>
-                </div>
-                <div class="w-1/12">
-                    <Icon
-                        name="ci:close"
-                        class="**:stroke-red-500 cursor-pointer pb-1"
-                        @click="deleteFile(index)"
-                        size="28"
-                    />
-                </div>
-            </li>
+            <NewAttachment
+                :id="item.id"
+                :size="item.size"
+                :name="item.name"
+                @delete="removeAttachment"
+            />
         </ul>
     </div>
 </template>
diff --git a/frontend/components/global/ToastContainer/ToastBox.vue b/frontend/components/global/ToastContainer/ToastBox.vue
index d12d88e..40db762 100644
--- a/frontend/components/global/ToastContainer/ToastBox.vue
+++ b/frontend/components/global/ToastContainer/ToastBox.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 // import
 
 import type { ToastOptions } from "~/composables/global/useToast";
@@ -9,9 +8,9 @@ import { useToast } from "~/composables/global/useToast";
 
 type Props = {
     id: number;
-    message: string,
-    options: ToastOptions
-}
+    message: string;
+    options: ToastOptions;
+};
 
 // props
 
@@ -24,7 +23,7 @@ const { destroyToast } = useToast();
 
 const open = ref(true);
 
-// method
+// methods
 
 const onSwipeEnd = () => {
     setTimeout(() => {
@@ -41,37 +40,39 @@ const statusIcon = computed(() => {
         case "success":
             return {
                 name: "duo-icons:check-circle",
-                class: "**:fill-success-500 [filter:drop-shadow(0_0_10px_var(--color-success-500))]"
+                class: "**:fill-success-500 [filter:drop-shadow(0_0_10px_var(--color-success-500))]",
             };
         case "error":
             return {
                 name: "duo-icons:alert-triangle",
-                class: "**:fill-danger-500 [filter:drop-shadow(0_0_10px_var(--color-danger-500))]"
+                class: "**:fill-danger-500 [filter:drop-shadow(0_0_10px_var(--color-danger-500))]",
             };
         case "info":
             return {
                 name: "duo-icons:info",
-                class: "**:fill-cyan-500 [filter:drop-shadow(0_0_10px_var(--color-cyan-500))]"
+                class: "**:fill-cyan-500 [filter:drop-shadow(0_0_10px_var(--color-cyan-500))]",
             };
         case "warning":
             return {
                 name: "duo-icons:alert-octagon",
-                class: "**:fill-warning-500 [filter:drop-shadow(0_0_10px_var(--color-warning-500))]"
+                class: "**:fill-warning-500 [filter:drop-shadow(0_0_10px_var(--color-warning-500))]",
             };
         default:
             return {
                 name: "duo-icons:info",
-                class: "**:fill-slate-500 [filter:drop-shadow(0_0_10px_var(--color-slate-500))]"
+                class: "**:fill-slate-500 [filter:drop-shadow(0_0_10px_var(--color-slate-500))]",
             };
     }
-
 });
 
 // watch
 
-watch(() => open.value, (value) => {
-    if (!value) onSwipeEnd();
-});
+watch(
+    () => open.value,
+    (value) => {
+        if (!value) onSwipeEnd();
+    }
+);
 
 // lifecycle
 
@@ -80,7 +81,6 @@ onMounted(() => {
         open.value = false;
     }, options.value.duration ?? 4000);
 });
-
 </script>
 
 <template>
@@ -92,7 +92,7 @@ onMounted(() => {
         :class="options.description ? 'rounded-150' : 'rounded-full'"
     >
         <ToastTitle
-            :class="[ { 'mb-1.5' : options.description } ]"
+            :class="[{ 'mb-1.5': options.description }]"
             class="[grid-area:_title] font-medium text-slate-600 text-sm flex items-center gap-2"
         >
             <Icon :name="statusIcon.name" :class="statusIcon.class" size="24" />
@@ -106,4 +106,4 @@ onMounted(() => {
             </div>
         </ToastDescription>
     </ToastRoot>
-</template>
\ No newline at end of file
+</template>
diff --git a/frontend/components/global/product-detail/Slider.vue b/frontend/components/global/product-detail/Slider.vue
index e1110d2..41d0e00 100644
--- a/frontend/components/global/product-detail/Slider.vue
+++ b/frontend/components/global/product-detail/Slider.vue
@@ -1,11 +1,10 @@
 <script lang="ts" setup>
-
 // types
 
 type Props = {
     selectedSlide: number;
-    slides: ProductImage[]
-}
+    slides: ProductImage[];
+};
 
 // props
 
@@ -23,17 +22,18 @@ const selectedSlideDetail = computed(() => {
     })!;
 });
 
-// method
+// methods
 
 const changeSlide = (id: number) => {
     emit("update:selectedSlide", id);
 };
-
 </script>
 
 <template>
     <div class="flex flex-col relative gap-6">
-        <div class="bg-white brightness-[97%] w-full relative aspect-square overflow-hidden rounded-200">
+        <div
+            class="bg-white brightness-[97%] w-full relative aspect-square overflow-hidden rounded-200"
+        >
             <Transition name="zoom" mode="out-in">
                 <img
                     :key="selectedSlideDetail.id"
@@ -47,7 +47,11 @@ const changeSlide = (id: number) => {
             <div
                 @click="changeSlide(slide.id)"
                 v-for="slide in slides"
-                :class="selectedSlide === slide.id ? '!ring-black' : 'ring-transparent'"
+                :class="
+                    selectedSlide === slide.id
+                        ? '!ring-black'
+                        : 'ring-transparent'
+                "
                 class="active:scale-95 hover:ring-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square ring-2 ring-offset-4 rounded-200 w-full overflow-hidden relative"
                 :key="slide.id"
             >
@@ -59,4 +63,4 @@ const changeSlide = (id: number) => {
             </div>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/frontend/components/product/ChatBox/ChatBoxContainer.vue b/frontend/components/product/ChatBox/ChatBoxContainer.vue
index cedb98c..91eafa5 100644
--- a/frontend/components/product/ChatBox/ChatBoxContainer.vue
+++ b/frontend/components/product/ChatBox/ChatBoxContainer.vue
@@ -29,17 +29,17 @@ const {
     isPending: isChatPending,
     isFetchingNextPage: isNextChatPagePending,
     hasNextPage: hasMoreChat,
-    fetchNextPage: loadMoreChat
+    fetchNextPage: loadMoreChat,
 } = useGetChat(id, isOpen);
 const isCreateMessagePending = useIsMutating({
-    mutationKey: [MUTATION_KEYS.create_chat]
+    mutationKey: [MUTATION_KEYS.create_chat],
 });
 
 const canLoadMoreChat = ref(false);
 
 const isChatScrollLocked = useScrollLock(chatContainerEl);
 const { y: chatContainerScrollY } = useScroll(chatContainerEl, {
-    behavior: "smooth"
+    behavior: "smooth",
 });
 
 useInfiniteScroll(
@@ -56,11 +56,11 @@ useInfiniteScroll(
         distance: 10,
         direction: "top",
         throttle: 1000,
-        canLoadMore: () => canLoadMoreChat.value
+        canLoadMore: () => canLoadMoreChat.value,
     }
 );
 
-// method
+// methods
 
 const scrollToBottom = () => {
     chatContainerScrollY.value = chatContainerEl.value?.scrollHeight ?? 0;
@@ -116,7 +116,7 @@ whenever(
         }, 2000);
     },
     {
-        once: true
+        once: true,
     }
 );
 </script>
@@ -131,16 +131,15 @@ whenever(
 
             <template v-if="isLoggedIn">
                 <Transition name="zoom" mode="out-in">
-
                     <div
                         v-if="!isChatPending"
                         class="p-4.5 h-full flex flex-col justify-between gap-4"
                     >
                         <div
                             :style="{
-                            maskImage:
-                                'linear-gradient(to top, transparent, black 5%, black, black)',
-                        }"
+                                maskImage:
+                                    'linear-gradient(to top, transparent, black 5%, black, black)',
+                            }"
                             class="hide-scrollbar flex flex-col py-7 gap-6 h-full overflow-y-auto"
                             ref="chatContainerEl"
                         >
@@ -148,7 +147,10 @@ whenever(
                                 v-if="hasMoreChat"
                                 class="py-2 flex items-center justify-center"
                             >
-                                <Icon name="svg-spinners:3-dots-fade" size="24" />
+                                <Icon
+                                    name="svg-spinners:3-dots-fade"
+                                    size="24"
+                                />
                             </div>
                             <ChatMessage
                                 v-for="(message, index) in chatMessages"
@@ -173,7 +175,6 @@ whenever(
                         <ChatInput />
                     </div>
 
-
                     <div
                         v-else
                         class="w-full h-full flex items-center justify-center absolute inset-0"
@@ -182,7 +183,10 @@ whenever(
                     </div>
                 </Transition>
             </template>
-            <div class="text-black p-4.5 size-full flex justify-center items-center" v-else>
+            <div
+                class="text-black p-4.5 size-full flex justify-center items-center"
+                v-else
+            >
                 Please sign in first
             </div>
         </div>
diff --git a/frontend/components/product/ChatBox/ChatButton.vue b/frontend/components/product/ChatBox/ChatButton.vue
index 22ab002..114b7c2 100644
--- a/frontend/components/product/ChatBox/ChatButton.vue
+++ b/frontend/components/product/ChatBox/ChatButton.vue
@@ -1,24 +1,21 @@
 <script setup lang="ts">
-
 // state
 
 const isOpen = ref(false);
 
-// method
+// methods
 
-const closeChat = () => isOpen.value = false;
+const closeChat = () => (isOpen.value = false);
 
 // provide-inject
 
 provide("isOpen", {
     isOpen,
-    closeChat
+    closeChat,
 });
-
 </script>
 
 <template>
-
     <button
         v-if="!isOpen"
         @click="isOpen = !isOpen"
@@ -32,5 +29,4 @@ provide("isOpen", {
     </button>
 
     <ChatBoxContainer :isOpen="isOpen" />
-
 </template>
diff --git a/frontend/components/product/ChatBox/ChatInput.vue b/frontend/components/product/ChatBox/ChatInput.vue
index 69cfea4..d59a17c 100644
--- a/frontend/components/product/ChatBox/ChatInput.vue
+++ b/frontend/components/product/ChatBox/ChatInput.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 // types
 
 import AiLoading from "~/components/product/ChatBox/AiLoading.vue";
@@ -12,12 +11,12 @@ const { $queryClient: queryClient } = useNuxtApp();
 
 const { addToast } = useToast();
 
-const { mutateAsync: createMessage, isPending: isCreatingMessage } = useCreateChatMessage(queryClient);
+const { mutateAsync: createMessage, isPending: isCreatingMessage } =
+    useCreateChatMessage(queryClient);
 
 const chatInputEl = ref<HTMLInputElement | null>(null);
 
-
-// method
+// methods
 
 const sendMessage = async () => {
     const value = chatInputEl.value!.value;
@@ -28,20 +27,18 @@ const sendMessage = async () => {
 
             await createMessage({
                 new_message: value,
-                productId: 1
+                productId: 1,
             });
-
         } catch (e) {
             addToast({
                 message: "مشکلی پیش آمده",
                 options: {
-                    status: "error"
-                }
+                    status: "error",
+                },
             });
         }
     }
 };
-
 </script>
 
 <template>
@@ -71,12 +68,20 @@ const sendMessage = async () => {
 
             <form
                 class="transition-all duration-200 relative flex items-center gap-4 w-full shadow-sm rounded-full h-[56px] border pe-3 ps-4"
-                :class="isCreatingMessage ? 'border-transparent shadow-black/10 bg-white/85 backdrop-blur-xl' : 'border-slate-200 shadow-transparent bg-white'"
+                :class="
+                    isCreatingMessage
+                        ? 'border-transparent shadow-black/10 bg-white/85 backdrop-blur-xl'
+                        : 'border-slate-200 shadow-transparent bg-white'
+                "
             >
                 <input
                     ref="chatInputEl"
                     :disabled="isCreatingMessage"
-                    :placeholder="isCreatingMessage ? 'دارم فکر میکنم...' : 'سوال خود را بپرسید'"
+                    :placeholder="
+                        isCreatingMessage
+                            ? 'دارم فکر میکنم...'
+                            : 'سوال خود را بپرسید'
+                    "
                     type="text"
                     name="text"
                     class="focus:outline-none h-full typo-p-sm w-full border-none"
@@ -89,13 +94,21 @@ const sendMessage = async () => {
                     :class="isCreatingMessage ? 'bg-transparent' : 'bg-black'"
                 >
                     <TransitionGroup name="fade-down">
-                        <AiLoading v-if="isCreatingMessage" circle :size="75" class="mb-1" />
-                        <Icon v-else name="iconamoon:send-light" class="absolute rotate-180 **:stroke-white" />
+                        <AiLoading
+                            v-if="isCreatingMessage"
+                            circle
+                            :size="75"
+                            class="mb-1"
+                        />
+                        <Icon
+                            v-else
+                            name="iconamoon:send-light"
+                            class="absolute rotate-180 **:stroke-white"
+                        />
                     </TransitionGroup>
                 </button>
             </form>
         </div>
-
     </div>
 </template>
 
@@ -303,4 +316,4 @@ const sendMessage = async () => {
         transform: translate(-50%, -50%) rotate(443deg);
     }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/components/product/ChatBox/ChatMessage.vue b/frontend/components/product/ChatBox/ChatMessage.vue
index c142dce..97ecf3b 100644
--- a/frontend/components/product/ChatBox/ChatMessage.vue
+++ b/frontend/components/product/ChatBox/ChatMessage.vue
@@ -1,14 +1,13 @@
 <script setup lang="ts">
-
 // types
 
 type Props = {
-    id: number,
-    reverse?: boolean,
-    content: string,
-    isLast?: boolean,
-    loadingContent?: boolean
-}
+    id: number;
+    reverse?: boolean;
+    content: string;
+    isLast?: boolean;
+    loadingContent?: boolean;
+};
 
 // props
 
@@ -23,20 +22,24 @@ const emit = defineEmits(["textUpdate"]);
 
 const { $gsap: gsap } = useNuxtApp();
 
-// method
+// methods
 
 const showMessage = () => {
-    gsap.fromTo(`#message-container-${id.value}`, {
-        rotateX: -50,
-        translateY: -40,
-        opacity: 0
-    }, {
-        rotateX: 0,
-        translateY: 0,
-        opacity: 1,
-        duration: 0.5,
-        ease: "expo.out"
-    });
+    gsap.fromTo(
+        `#message-container-${id.value}`,
+        {
+            rotateX: -50,
+            translateY: -40,
+            opacity: 0,
+        },
+        {
+            rotateX: 0,
+            translateY: 0,
+            opacity: 1,
+            duration: 0.5,
+            ease: "expo.out",
+        }
+    );
 };
 
 // lifecycle
@@ -47,19 +50,22 @@ onMounted(() => {
     }
 
     if (reverse.value && isLast.value) {
-        gsap.fromTo(`#chat-message-content-${id.value}`, {
-            text: "",
-            duration: 2.5,
-            ease: "none"
-        }, {
-            text: { value: content.value, rtl: false },
-            duration: 2.5,
-            ease: "none",
-            onUpdate: () => emit("textUpdate")
-        });
+        gsap.fromTo(
+            `#chat-message-content-${id.value}`,
+            {
+                text: "",
+                duration: 2.5,
+                ease: "none",
+            },
+            {
+                text: { value: content.value, rtl: false },
+                duration: 2.5,
+                ease: "none",
+                onUpdate: () => emit("textUpdate"),
+            }
+        );
     }
 });
-
 </script>
 
 <template>
@@ -81,7 +87,11 @@ onMounted(() => {
             </div>
             <div
                 class="rounded-150 px-4 py-3"
-                :class="reverse ? 'bg-slate-100 text-slate-600' : 'bg-black text-white'"
+                :class="
+                    reverse
+                        ? 'bg-slate-100 text-slate-600'
+                        : 'bg-black text-white'
+                "
             >
                 <p
                     v-if="!loadingContent"
@@ -91,12 +101,8 @@ onMounted(() => {
                     {{ content }}
                 </p>
 
-                <Icon
-                    v-else
-                    name="svg-spinners:3-dots-bounce"
-                    size="20"
-                />
+                <Icon v-else name="svg-spinners:3-dots-bounce" size="20" />
             </div>
         </div>
     </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/frontend/components/product/ProductComments.vue b/frontend/components/product/ProductComments.vue
index 2d38b65..1b0bcd8 100644
--- a/frontend/components/product/ProductComments.vue
+++ b/frontend/components/product/ProductComments.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-
 // import
 
 import useGetComments from "~/composables/api/product/useGetComments";
@@ -16,15 +15,16 @@ const page = ref(1);
 const { token } = useAuth();
 const userComment = ref("");
 
-const { data: comments, refetch : refetchComments } = useGetComments(id, page);
-const { mutateAsync: createComment, isPending: isCreateCommentPending } = useCreateComment(id);
+const { data: comments, refetch: refetchComments } = useGetComments(id, page);
+const { mutateAsync: createComment, isPending: isCreateCommentPending } =
+    useCreateComment(id);
 
-// method
+// methods
 
 const submitComment = async () => {
     if (userComment.value.length > 3) {
         await createComment({
-            content: userComment.value
+            content: userComment.value,
         });
 
         userComment.value = "";
@@ -32,23 +32,25 @@ const submitComment = async () => {
         await refetchComments();
     }
 };
-
 </script>
 
 <template>
     <section class="bg-slate-50">
         <div class="flex relative gap-8 my-42 container">
-            <div class="sticky top-0 flex flex-col gap-6 min-w-[400px] max-h-min bg-white p-8 rounded-xl border-[0.5px] border-slate-200">
-                <h3 class="typo-h-3">
-                    نظرات کاربران
-                </h3>
+            <div
+                class="sticky top-0 flex flex-col gap-6 min-w-[400px] max-h-min bg-white p-8 rounded-xl border-[0.5px] border-slate-200"
+            >
+                <h3 class="typo-h-3">نظرات کاربران</h3>
                 <div class="flex flex-col gap-2">
                     <Rating />
                     <span class="typo-p-sm">
                         بر اساس {{ comments?.count }} نظر
                     </span>
                 </div>
-                <form @submit.prevent="submitComment" class="flex flex-col gap-6">
+                <form
+                    @submit.prevent="submitComment"
+                    class="flex flex-col gap-6"
+                >
                     <textarea
                         :disabled="!token"
                         class="w-full min-h-[200px] field-sizing-content rounded-xl bg-white p-4 border border-slate-200"
@@ -65,10 +67,7 @@ const submitComment = async () => {
                         نظر بنویسید
                     </Button>
                     <NuxtLink v-else to="/signin">
-                        <Button
-                            type="button"
-                            class="rounded-full w-full"
-                        >
+                        <Button type="button" class="rounded-full w-full">
                             وارد شوید
                         </Button>
                     </NuxtLink>
@@ -90,7 +89,6 @@ const submitComment = async () => {
                     />
                 </div>
             </div>
-
         </div>
     </section>
-</template>
\ No newline at end of file
+</template>
diff --git a/frontend/components/profile/ProfileSidebar.vue b/frontend/components/profile/ProfileSidebar.vue
index 2908392..a8b9d53 100644
--- a/frontend/components/profile/ProfileSidebar.vue
+++ b/frontend/components/profile/ProfileSidebar.vue
@@ -52,9 +52,10 @@ await suspense();
             <div class="flex items-center justify-between w-full">
                 <div class="flex flex-col items-start gap-1">
                     <span class="flex font-semibold text-dynamic-primary">
-                        <p>
+                        <p v-if="account?.first_name">
                             {{ `${account?.first_name} ${account?.last_name}` }}
                         </p>
+                        <p v-else>بدون نام کاربری</p>
                     </span>
                     <NuxtLink
                         :to="{ name: 'profile' }"
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>
diff --git a/frontend/composables/api/account/useCreateOrUpdateAddress.ts b/frontend/composables/api/account/useCreateOrUpdateAddress.ts
index f5a069c..a2f978b 100644
--- a/frontend/composables/api/account/useCreateOrUpdateAddress.ts
+++ b/frontend/composables/api/account/useCreateOrUpdateAddress.ts
@@ -5,17 +5,17 @@ import { API_ENDPOINTS } from "~/constants";
 
 // types
 
-export type CreateOrUpdateAddressRequest = Omit<Address, "is_main">;
+export type CreateOrUpdateAddressResponse = Omit<Address, "is_main">;
 
 const useCreateOrUpdateAddress = (update: ComputedRef<Boolean>) => {
     // state
 
     const { $axios: axios } = useNuxtApp();
 
-    // method
+    // methods
 
     const handleCreateOrUpdateAddress = async (
-        addressData: CreateOrUpdateAddressRequest
+        addressData: CreateOrUpdateAddressResponse
     ) => {
         const { data } = await axios[update.value ? "put" : "post"](
             update.value
@@ -30,7 +30,7 @@ const useCreateOrUpdateAddress = (update: ComputedRef<Boolean>) => {
     };
 
     return useMutation({
-        mutationFn: (addressData: CreateOrUpdateAddressRequest) =>
+        mutationFn: (addressData: CreateOrUpdateAddressResponse) =>
             handleCreateOrUpdateAddress(addressData),
     });
 };
diff --git a/frontend/composables/api/account/useDeleteAddress.ts b/frontend/composables/api/account/useDeleteAddress.ts
index f894016..ada4989 100644
--- a/frontend/composables/api/account/useDeleteAddress.ts
+++ b/frontend/composables/api/account/useDeleteAddress.ts
@@ -14,7 +14,7 @@ const useDeleteAddress = () => {
 
     const { $axios: axios } = useNuxtApp();
 
-    // method
+    // methods
 
     const handleDeleteAddress = async (id: number) => {
         const { data } = await axios.delete(
diff --git a/frontend/composables/api/account/useUpdateAccount.ts b/frontend/composables/api/account/useUpdateAccount.ts
index 521d56a..8a4882e 100644
--- a/frontend/composables/api/account/useUpdateAccount.ts
+++ b/frontend/composables/api/account/useUpdateAccount.ts
@@ -20,7 +20,7 @@ const useUpdateAccount = () => {
 
     const { $axios: axios } = useNuxtApp();
 
-    // method
+    // methods
 
     const handleUpdateAccount = async (params: UpdateAccountRequest) => {
         const { data } = await axios.patch(
diff --git a/frontend/composables/api/auth/useAuth.ts b/frontend/composables/api/auth/useAuth.ts
index e74d967..d65e25d 100644
--- a/frontend/composables/api/auth/useAuth.ts
+++ b/frontend/composables/api/auth/useAuth.ts
@@ -1,11 +1,10 @@
 export const useAuth = () => {
-
     // state
 
     const token = useCookie("token");
     const refreshToken = useCookie("refresh-token");
 
-    // method
+    // methods
 
     const updateToken = (newToken: string) => {
         token.value = newToken;
@@ -15,7 +14,7 @@ export const useAuth = () => {
         refreshToken.value = newToken;
     };
 
-    const logout = (reload ?: boolean) => {
+    const logout = (reload?: boolean) => {
         token.value = undefined;
         refreshToken.value = undefined;
         if (reload) window.location.reload();
@@ -25,6 +24,12 @@ export const useAuth = () => {
 
     const isLoggedIn = computed(() => !!token.value);
 
-    return { token, refreshToken, updateRefreshToken, updateToken, logout, isLoggedIn };
-
-};
\ No newline at end of file
+    return {
+        token,
+        refreshToken,
+        updateRefreshToken,
+        updateToken,
+        logout,
+        isLoggedIn,
+    };
+};
diff --git a/frontend/composables/api/auth/useRefreshAuth.ts b/frontend/composables/api/auth/useRefreshAuth.ts
index 6540427..520c175 100644
--- a/frontend/composables/api/auth/useRefreshAuth.ts
+++ b/frontend/composables/api/auth/useRefreshAuth.ts
@@ -6,17 +6,15 @@ import { API_ENDPOINTS } from "~/constants";
 // types
 
 export type RefreshAuthRequest = {
-    refresh: string,
+    refresh: string;
 };
 
 export type RefreshAuthResponse = {
-    access: string,
-    refresh: string,
+    access: string;
+    refresh: string;
 };
 
-
 const useRefreshAuth = () => {
-
     // state
 
     const { $axios: axios } = useNuxtApp();
@@ -24,12 +22,16 @@ const useRefreshAuth = () => {
     // methods
 
     const handleRefreshAuth = async (variables: RefreshAuthRequest) => {
-        const { data } = await axios.post<RefreshAuthResponse>(`${API_ENDPOINTS.auth.refresh}/`, variables);
+        const { data } = await axios.post<RefreshAuthResponse>(
+            `${API_ENDPOINTS.auth.refresh}`,
+            variables
+        );
         return data;
     };
 
     return useMutation({
-        mutationFn: (variables: RefreshAuthRequest) => handleRefreshAuth(variables)
+        mutationFn: (variables: RefreshAuthRequest) =>
+            handleRefreshAuth(variables),
     });
 };
 
diff --git a/frontend/composables/api/chat/useCreateChatMessage.ts b/frontend/composables/api/chat/useCreateChatMessage.ts
index 87f5da6..700b8b4 100644
--- a/frontend/composables/api/chat/useCreateChatMessage.ts
+++ b/frontend/composables/api/chat/useCreateChatMessage.ts
@@ -11,64 +11,37 @@ export type CreateChatMessageRequest = {
     new_message: string;
 };
 
-export type CreateChatMessageResponse = Chat[]
+export type CreateChatMessageResponse = Chat[];
 
 const useCreateChatMessage = (queryClient: QueryClient) => {
-
     // state
 
     const { $axios: axios } = useNuxtApp();
 
-    // method
+    // methods
 
-    const handleCreateChatMessage = async (variables: CreateChatMessageRequest) => {
-
-        const { data } = await axios.post<CreateChatMessageResponse>(`${API_ENDPOINTS.chat.new_message}/${variables.productId}`, variables);
+    const handleCreateChatMessage = async (
+        variables: CreateChatMessageRequest
+    ) => {
+        const { data } = await axios.post<CreateChatMessageResponse>(
+            `${API_ENDPOINTS.chat.new_message}/${variables.productId}`,
+            variables
+        );
         return data;
     };
 
     return useMutation({
         mutationKey: [MUTATION_KEYS.create_chat],
-        mutationFn: (variables: CreateChatMessageRequest) => handleCreateChatMessage(variables),
+        mutationFn: (variables: CreateChatMessageRequest) =>
+            handleCreateChatMessage(variables),
         onMutate: (newMessage) => {
-            const prevData = queryClient.getQueriesData({ queryKey: [QUERY_KEYS.chat] });
-
-            queryClient.setQueryData<InfiniteData<ApiPaginated<Chat>>>([QUERY_KEYS.chat], (oldData) => {
-                const lastPage = oldData!.pages[oldData!.pages.length - 1];
-
-                return {
-                    pages: [
-                        {
-                            count: lastPage.count,
-                            next: lastPage.next,
-                            previous: lastPage.previous,
-                            results: [
-                                {
-                                    id: Date.now(),
-                                    content: newMessage.new_message,
-                                    sender: "user"
-                                }
-                            ]
-                        },
-                        ...oldData!.pages
-                    ],
-                    pageParams: [
-                        ...oldData!.pageParams,
-                        {
-                            limit: 10,
-                            offset: 0
-                        }
-                    ]
-                };
+            const prevData = queryClient.getQueriesData({
+                queryKey: [QUERY_KEYS.chat],
             });
 
-
-            return { prevData: prevData ? prevData[0][1] : undefined };
-        },
-        onSuccess: (response) => {
-
-            queryClient.setQueryData<InfiniteData<ApiPaginated<Chat>>>([QUERY_KEYS.chat], (oldData) => {
-                if (oldData) {
+            queryClient.setQueryData<InfiniteData<ApiPaginated<Chat>>>(
+                [QUERY_KEYS.chat],
+                (oldData) => {
                     const lastPage = oldData!.pages[oldData!.pages.length - 1];
 
                     return {
@@ -77,38 +50,72 @@ const useCreateChatMessage = (queryClient: QueryClient) => {
                                 count: lastPage.count,
                                 next: lastPage.next,
                                 previous: lastPage.previous,
-                                results: {
-                                    ...response[0],
-                                    id: Date.now()
-                                }
+                                results: [
+                                    {
+                                        id: Date.now(),
+                                        content: newMessage.new_message,
+                                        sender: "user",
+                                    },
+                                ],
                             },
-                            ...oldData!.pages
+                            ...oldData!.pages,
                         ],
                         pageParams: [
                             ...oldData!.pageParams,
                             {
                                 limit: 10,
-                                offset: 0
-                            }
-                        ]
+                                offset: 0,
+                            },
+                        ],
                     };
                 }
+            );
 
-                return oldData;
-            });
+            return { prevData: prevData ? prevData[0][1] : undefined };
+        },
+        onSuccess: (response) => {
+            queryClient.setQueryData<InfiniteData<ApiPaginated<Chat>>>(
+                [QUERY_KEYS.chat],
+                (oldData) => {
+                    if (oldData) {
+                        const lastPage =
+                            oldData!.pages[oldData!.pages.length - 1];
 
+                        return {
+                            pages: [
+                                {
+                                    count: lastPage.count,
+                                    next: lastPage.next,
+                                    previous: lastPage.previous,
+                                    results: {
+                                        ...response[0],
+                                        id: Date.now(),
+                                    },
+                                },
+                                ...oldData!.pages,
+                            ],
+                            pageParams: [
+                                ...oldData!.pageParams,
+                                {
+                                    limit: 10,
+                                    offset: 0,
+                                },
+                            ],
+                        };
+                    }
+
+                    return oldData;
+                }
+            );
         },
         onError: (err, newMessage, context) => {
             if (context) {
-                queryClient.setQueryData(
-                    [QUERY_KEYS.chat],
-                    context.prevData
-                );
+                queryClient.setQueryData([QUERY_KEYS.chat], context.prevData);
             }
         },
         onSettled: (newMessage) => {
             queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.chat] });
-        }
+        },
     });
 };
 
diff --git a/frontend/composables/api/chat/useGetChat.ts b/frontend/composables/api/chat/useGetChat.ts
index 8209937..927af3e 100644
--- a/frontend/composables/api/chat/useGetChat.ts
+++ b/frontend/composables/api/chat/useGetChat.ts
@@ -8,34 +8,36 @@ import { useAuth } from "~/composables/api/auth/useAuth";
 
 export type GetBranchResponse = ApiPaginated<Chat>;
 
-const useGetBranch = (
-    productId: string | number,
-    enabled: Ref<boolean>
-) => {
-
+const useGetBranch = (productId: string | number, enabled: Ref<boolean>) => {
     // state
 
     const { $axios: axios } = useNuxtApp();
 
     const { isLoggedIn } = useAuth();
 
-    // method
+    // methods
 
-    const handleGetChat = async ({ productId, limit, offset }: {
-        productId: number | string,
-        limit: number,
-        offset: number
+    const handleGetChat = async ({
+        productId,
+        limit,
+        offset,
+    }: {
+        productId: number | string;
+        limit: number;
+        offset: number;
     }) => {
-
-        const { data } = await axios.get<GetBranchResponse>(`${API_ENDPOINTS.chat.messages}/${productId}`, {
-            params: {
-                offset,
-                limit
-            },
-            headers: {
-                Authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoyMTY3ODE2OTAwLCJpYXQiOjE3MzU4MTY5MDAsImp0aSI6ImQwN2E2Y2Y2NzgwZjRlNTE5NWIzOGQxMTAzYzU4NDQ3IiwidXNlcl9pZCI6NX0.slwd7ZSV7nUXEuDTYwwHUOo9ekCefwEEL4kVv2vSTFo`
+        const { data } = await axios.get<GetBranchResponse>(
+            `${API_ENDPOINTS.chat.messages}/${productId}`,
+            {
+                params: {
+                    offset,
+                    limit,
+                },
+                headers: {
+                    Authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoyMTY3ODE2OTAwLCJpYXQiOjE3MzU4MTY5MDAsImp0aSI6ImQwN2E2Y2Y2NzgwZjRlNTE5NWIzOGQxMTAzYzU4NDQ3IiwidXNlcl9pZCI6NX0.slwd7ZSV7nUXEuDTYwwHUOo9ekCefwEEL4kVv2vSTFo`,
+                },
             }
-        });
+        );
         return data;
     };
 
@@ -44,21 +46,22 @@ const useGetBranch = (
         queryKey: [QUERY_KEYS.chat],
         initialPageParam: {
             limit: 10,
-            offset: 0
+            offset: 0,
         },
-        queryFn: ({ pageParam }) => handleGetChat({
-            limit: pageParam.limit,
-            offset: pageParam.offset,
-            productId: productId
-        }),
+        queryFn: ({ pageParam }) =>
+            handleGetChat({
+                limit: pageParam.limit,
+                offset: pageParam.offset,
+                productId: productId,
+            }),
         getNextPageParam: (lastPage, pages) => {
             if (!lastPage.next) return undefined;
 
             return {
                 limit: 10,
-                offset: pages.length * 10
+                offset: pages.length * 10,
             };
-        }
+        },
     });
 };
 
diff --git a/frontend/composables/api/product/useCreateComment.ts b/frontend/composables/api/product/useCreateComment.ts
index 9443850..cd43eff 100644
--- a/frontend/composables/api/product/useCreateComment.ts
+++ b/frontend/composables/api/product/useCreateComment.ts
@@ -6,24 +6,27 @@ import { API_ENDPOINTS } from "~/constants";
 // types
 
 export type CreateCommentRequest = {
-    content: string
+    content: string;
 };
 
 const useCreateComment = (id: number | string | undefined) => {
-
     // state
 
     const { $axios: axios } = useNuxtApp();
 
-    // method
+    // methods
 
     const handleCreateComment = async (variables: CreateCommentRequest) => {
-        const { data } = await axios.post(`${API_ENDPOINTS.product.create_comment}/${id}`, variables);
+        const { data } = await axios.post(
+            `${API_ENDPOINTS.product.create_comment}/${id}`,
+            variables
+        );
         return data;
     };
 
     return useMutation({
-        mutationFn: (variables: CreateCommentRequest) => handleCreateComment(variables)
+        mutationFn: (variables: CreateCommentRequest) =>
+            handleCreateComment(variables),
     });
 };
 
diff --git a/frontend/composables/api/tickets/useCreateTicket.ts b/frontend/composables/api/tickets/useCreateTicket.ts
new file mode 100644
index 0000000..353e1cc
--- /dev/null
+++ b/frontend/composables/api/tickets/useCreateTicket.ts
@@ -0,0 +1,50 @@
+// imports
+
+import { useMutation } from "@tanstack/vue-query";
+import { API_ENDPOINTS } from "~/constants";
+
+// types
+
+export type CreateTicketRequest = {
+    ticket_category: string | undefined;
+    order: number | undefined;
+    subject: string;
+    content: string;
+    attachments: {
+        id: number;
+        file_link: string;
+        date: string;
+        size: number;
+        name: string;
+    }[];
+};
+
+const useCreateTicket = () => {
+    // state
+
+    const { $axios: axios } = useNuxtApp();
+
+    // methods
+
+    const handleCreateTicket = async (params: CreateTicketRequest) => {
+        const { data } = await axios.post(
+            API_ENDPOINTS.account.address.update,
+            {
+                ...params,
+            },
+            {
+                headers: {
+                    "Content-Type": "multipart/form-data",
+                },
+            }
+        );
+        return data;
+    };
+
+    return useMutation({
+        mutationFn: (ticketData: CreateTicketRequest) =>
+            handleCreateTicket(ticketData),
+    });
+};
+
+export default useCreateTicket;
diff --git a/frontend/composables/api/tickets/useDeleteAttachment.ts b/frontend/composables/api/tickets/useDeleteAttachment.ts
new file mode 100644
index 0000000..12f06b3
--- /dev/null
+++ b/frontend/composables/api/tickets/useDeleteAttachment.ts
@@ -0,0 +1,36 @@
+// imports
+
+import { useMutation } from "@tanstack/vue-query";
+import { API_ENDPOINTS } from "~/constants";
+
+// types
+
+export type DeleteAttachmentRequest = {
+    id: number | string;
+};
+
+// methods
+
+export const handleDeleteAttachment = async ({
+    id,
+}: DeleteAttachmentRequest) => {
+    // state
+
+    const { $axios: axios } = useNuxtApp();
+
+    const { data } = await axios.delete(
+        `${API_ENDPOINTS.tickets.delete_attachment}/${id}`
+    );
+    return data;
+};
+
+// composable
+
+const useDeleteAttachment = () => {
+    return useMutation({
+        mutationFn: (data: DeleteAttachmentRequest) =>
+            handleDeleteAttachment({ ...data }),
+    });
+};
+
+export default useDeleteAttachment;
diff --git a/frontend/composables/api/tickets/useUploadAttachment.ts b/frontend/composables/api/tickets/useUploadAttachment.ts
new file mode 100644
index 0000000..46ad07d
--- /dev/null
+++ b/frontend/composables/api/tickets/useUploadAttachment.ts
@@ -0,0 +1,52 @@
+// imports
+
+import { useMutation } from "@tanstack/vue-query";
+import { API_ENDPOINTS } from "~/constants";
+
+// types
+
+export type UploadAttachmentRequest = {
+    file: File;
+};
+
+export type UploadAttachmentResponse = {
+    id: number;
+    file_link: string;
+    date: string;
+    size: number;
+    name: string;
+};
+
+// methods
+
+export const handleUploadAttachment = async ({
+    file,
+}: UploadAttachmentRequest) => {
+    // state
+
+    const { $axios: axios } = useNuxtApp();
+
+    const { data } = await axios.post<UploadAttachmentResponse>(
+        API_ENDPOINTS.tickets.upload_attachment,
+        {
+            file,
+        },
+        {
+            headers: {
+                "Content-Type": "multipart/form-data",
+            },
+        }
+    );
+    return data;
+};
+
+// composable
+
+const useUploadAttachment = () => {
+    return useMutation({
+        mutationFn: (data: UploadAttachmentRequest) =>
+            handleUploadAttachment({ file: data.file }),
+    });
+};
+
+export default useUploadAttachment;
diff --git a/frontend/constants/index.ts b/frontend/constants/index.ts
index 519d47b..4a835d5 100644
--- a/frontend/constants/index.ts
+++ b/frontend/constants/index.ts
@@ -35,7 +35,10 @@ export const API_ENDPOINTS = {
         categories: "/products/categories",
     },
     tickets: {
-        get_all: "/tickets/",
+        get_all: "/tickets",
+        create: "/tickets/create",
+        upload_attachment: "/tickets/attachment/create",
+        delete_attachment: "/tickets/attachment/delete",
     },
 };
 
diff --git a/frontend/pages/profile/tickets/index.vue b/frontend/pages/profile/tickets/index.vue
index 409e907..363050c 100644
--- a/frontend/pages/profile/tickets/index.vue
+++ b/frontend/pages/profile/tickets/index.vue
@@ -40,6 +40,8 @@ const tickets = computed(() => {
     return data.value?.results.flat();
 });
 
+const hasTickets = computed(() => tickets.value?.length > 0);
+
 const paginationData = computed(() => {
     return tickets!.value?.results.map((_, i: number) => {
         return { type: "page", value: i };
@@ -54,7 +56,10 @@ const paginationData = computed(() => {
         <div class="w-full flex flex-col gap-5">
             <div class="w-full flex items-center justify-between px-5">
                 <div class="flex items-center justify-start gap-8">
-                    <div class="flex items-center justify-start gap-3">
+                    <div
+                        v-if="hasTickets"
+                        class="flex items-center justify-start gap-3"
+                    >
                         <span class="text-sm">ترتیب بر اساس</span>
                         <Select
                             :options="['جدید ترین', 'قدیمی ترین']"
@@ -63,7 +68,10 @@ const paginationData = computed(() => {
                             class="w-[5rem]"
                         />
                     </div>
-                    <div class="flex items-center justify-start gap-3">
+                    <div
+                        v-if="hasTickets"
+                        class="flex items-center justify-start gap-3"
+                    >
                         <span class="text-sm">وضعیت پرداخت</span>
                         <Select
                             :options="[
@@ -88,7 +96,7 @@ const paginationData = computed(() => {
             </div>
 
             <Placeholder
-                v-if="!tickets?.length && !ticketsIsLoading"
+                v-if="!hasTickets && !ticketsIsLoading"
                 class="!w-full !py-[5rem]"
                 icon="bi:ticket"
                 title="تیکتی یافت نشد"
diff --git a/frontend/pages/profile/tickets/new.vue b/frontend/pages/profile/tickets/new.vue
index e79aff9..e409be9 100644
--- a/frontend/pages/profile/tickets/new.vue
+++ b/frontend/pages/profile/tickets/new.vue
@@ -1,4 +1,13 @@
 <script setup lang="ts">
+// imports
+
+import useCreateTicket, {
+    type CreateTicketRequest,
+} from "~/composables/api/tickets/useCreateTicket";
+import useUploadAttachment from "~/composables/api/tickets/useUploadAttachment";
+import { useToast } from "~/composables/global/useToast";
+import { QUERY_KEYS } from "~/constants";
+
 // meta
 
 definePageMeta({
@@ -15,6 +24,12 @@ type TicketCategory = {
 
 // state
 
+const router = useRouter();
+
+const { $queryClient: queryClient } = useNuxtApp();
+
+const { addToast } = useToast();
+
 const ticketCategories: TicketCategory[] = [
     {
         title: "مالی و حسابداری",
@@ -46,12 +61,76 @@ const ticketCategories: TicketCategory[] = [
     },
 ];
 
-const ticketData = ref({
-    category: undefined,
+const ticketData = ref<CreateTicketRequest>({
+    ticket_category: undefined,
     order: undefined,
-    message: "",
-    files: [],
+    subject: "",
+    content: "",
+    attachments: [],
 });
+
+// queries
+
+const { mutateAsync: createTicket, isPending: createTicketIsPending } =
+    useCreateTicket();
+
+const { mutate: uploadAttachment, isPending: uploadAttachmentIsPending } =
+    useUploadAttachment();
+
+// methods
+
+const handleUploadAttachment = (file: File) => {
+    uploadAttachment(
+        { file },
+        {
+            onSuccess: (data) => {
+                ticketData.value.attachments.push({ ...data });
+            },
+            onError: (error) => {
+                addToast({
+                    message: error.message
+                        ? error.message
+                        : "خطایی در آپلود پیوست رخ داد",
+                    options: {
+                        status: "error",
+                        description: "لطفا مجدد تلاش کنید",
+                    },
+                });
+            },
+        }
+    );
+};
+
+const handleSubmit = () => {
+    createTicket(
+        { ...ticketData.value },
+        {
+            onSuccess: () => {
+                router.push({ name: "profile-tickets" });
+                queryClient.invalidateQueries({
+                    queryKey: [QUERY_KEYS.tickets],
+                });
+                addToast({
+                    message: "تیکت شما با موفقیت ثبت شد",
+                    options: {
+                        status: "success",
+                        description:
+                            "پس از بررسی پشتیبانی به شما اطلاع رسانی می شود",
+                    },
+                });
+            },
+            onError: () => {
+                addToast({
+                    message: "خطایی در ثبت تیکت رخ داد",
+                    options: {
+                        status: "success",
+                        description: "لطفا مجدد تلاش کنید",
+                    },
+                });
+            },
+        }
+    );
+};
 </script>
 
 <template>
@@ -75,7 +154,7 @@ const ticketData = ref({
                     <Select
                         placeholder="انتخاب کنید"
                         variant="outlined"
-                        v-model="ticketData.category"
+                        v-model="ticketData.ticket_category"
                     >
                         <template #content>
                             <SelectGroup>
@@ -133,23 +212,39 @@ const ticketData = ref({
                         </template>
                     </Select>
                 </DataField>
+                <DataField
+                    id="subject"
+                    :required="true"
+                    label="عنوان تیکت"
+                    class="col-span-full"
+                >
+                    <Input
+                        v-model="ticketData.subject"
+                        placeholder="عنوان تیکت را اینجا بنویسید ..."
+                        variant="outlined"
+                    />
+                </DataField>
                 <DataField id="message" :required="true" label="متن تیکت">
                     <textarea
-                        v-model="ticketData.message"
+                        v-model="ticketData.content"
                         class="w-full bg-white border-[1.5px] border-slate-200 rounded-xl text-xs lg:text-sm p-5 text-black h-[10rem] lg:h-[20rem] transition resize-none outline-none focus:!border-black"
                         placeholder="متن تیکت را اینجا بنویسید ..."
                     />
                 </DataField>
-                <FileInput v-model="ticketData.files" />
+                <FileInput
+                    v-model="ticketData.attachments"
+                    @change="handleUploadAttachment"
+                    :loading="uploadAttachmentIsPending"
+                />
             </div>
         </ProfileSection>
         <div class="w-full flex-center py-5">
             <Button class="rounded-full px-20" end-icon="bi:send" size="md">
-                <!-- <Icon
-                    v-if="createAddressIsPending"
+                <Icon
+                    v-if="createTicketIsPending"
                     name="svg-spinners:3-dots-bounce"
-                /> -->
-                <span>ارسال تیکت</span>
+                />
+                <span v-else>ارسال تیکت</span>
             </Button>
         </div>
     </div>
diff --git a/frontend/plugins/axios.ts b/frontend/plugins/axios.ts
index 296a285..6218f29 100644
--- a/frontend/plugins/axios.ts
+++ b/frontend/plugins/axios.ts
@@ -8,7 +8,9 @@ export default defineNuxtPlugin(() => {
     const { token, logout } = useAuth();
 
     const axios = axiosOriginal.create({
-        baseURL: config.public.API_BASE_URL
+        timeout: 30000,
+        timeoutErrorMessage: "فرآیند بیش از حد انتظار طول کشید",
+        baseURL: config.public.API_BASE_URL,
     });
 
     axios.interceptors.request.use((config) => {
@@ -16,29 +18,32 @@ export default defineNuxtPlugin(() => {
             !config.url?.includes(API_ENDPOINTS.auth.signin) &&
             !config.url?.includes(API_ENDPOINTS.account.send_otp)
         ) {
-            config.headers.Authorization = token.value ? `Bearer ${token.value}` : undefined;
+            config.headers.Authorization = token.value
+                ? `Bearer ${token.value}`
+                : undefined;
         }
 
         return config;
     });
 
-    axios.interceptors.response.use((response) => {
-        return response;
-    }, async function(error) {
+    axios.interceptors.response.use(
+        (response) => {
+            return response;
+        },
+        async function (error) {
+            await Logger.axiosErrorLog(error);
 
-        await Logger.axiosErrorLog(error);
+            // if (error.status === 401) {
+            //     logout();
+            // }
 
-        // if (error.status === 401) {
-        //     logout();
-        // }
-
-        return Promise.reject(error);
-    });
+            return Promise.reject(error);
+        }
+    );
 
     return {
         provide: {
-            axios
-        }
+            axios,
+        },
     };
-
-});
\ No newline at end of file
+});